Use the widget builder below to create your free background music widget. Select a template and click “Continue with this template” to get started.
How to use the Background Music Widget builder
- Choose a template: Some of the available ones are Nature Sounds, Spa Music, Chrismas Player, Volume, Halloween, and Embeddable Player. (You can customize the template later)
- Edit background audio tracks: In the Tracks section, you can upload background music you want to embed on your site. Each track can have its title, artist, and image. You can set the order of each background sound by dragging and dropping its placement on the playlist.
- Set the widget’s layout: There are two options: floating and embed. Also, you can set the web background music widget’s placement (Top Left & Right, Bottom Left & Right) as well as turn the close button on or off.
- Player Settings: In this section, you can set the player options.
- Player Controls: Turn on or off the buttons of Prev and Next, Play, Shuffle, Loop, Volume, and Playlist on the player. Also, there are toggle options available on the background music widget creator for enabling the Save Playing Track and Progres and shuffle, repeat, and loop playlists by default.
- Autoplay: Automatically play audio background on the website.
- Playlist: Show or hide the playlist by default, track info, and set the playlist’s height.
- Message: This section lets you translate front-end messages.
- Customize Appearance: There are two color schemes available: Light and Dark. The Custom color scheme allows you to edit the background, colors, and fonts. There are even custom CSS and JavaScript fields for further customizing the look and feel of the background music widget.
- Once you have finished designing the website background music plugin, click on the “Add to website for free” button and sign up on the following page to save your widget.
- Get the embed code for the background audio gadget and use it on your website.
HTML Background Audio Widget’s embed code
Paste the embed code on before the closing body tag (</body>) your website’s template, theme, or HTML source code editor in places where you want to embed HTML background music widget.
How to Manage Your Background audio Widget
Once you have created your background audio widget for websites, you can easily manage it on your account. In your dashboard, search for the “Background Music” app under the list of apps. As you can see from the following screenshot, you can create more Background music widgets, edit existing ones, and get HTML embed code.
