Use the widget builder below to create your free background music widget for your Wix website. Select a template and click “Continue with this template” to get started.
How to add Background music to Wix
- 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. You can also set the web background music widget’s placement (Top Left and right, Bottom Left and right) and turn the close button on or off. Since you are adding background music to Wix, select the embed layout type.
- 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 Wix 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 Wix website.
How to embed Background Audio Player in Your Wix Website
The embed code will include two parts: an External JavaScript file and an HTML div tag with a class attribute unique to your created Background music widget. You can display it embed it on your Wix website. Here’s how:
Adding background music to entire Wix website
- Log in to your Wix account and choose the website where you’d like to add the widget. Click on the Settings (1) section in your Dashboard menu, find the Development & Integrations section and choose Custom code (2):
- Click on the + Add Custom Code button in the right upper corner:
- Insert the widget’s installation code into the Paste the code snippet here field. In the Place Code in options, select Body – start, then click Apply to save the changes.
Adding background music to an individual page
You can easily showcase background audio widget on your Wix website by using the “Embed HTML” block in Website Editor. Here’s how:
- Edit the page where you want to embed background audio player on Wix.
- Add the Embed HTML element to your page.
- Click on “Code” option under HTML Settings popup. Paste the generated code into the Embed HTML section.
- Adjust placement and size of embedded background music widget on Wix. Save your changes and preview the widget.
The best part is you can display your background music widget on multiple websites regardless of whether they are made on Wix.
How to Manage Your Background audio Widget
Once you have created your background audio widget for Wix, you can easily manage it on your account. In your dashboard, search for “Background Music” app under 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.
