Use the widget builder below to create your free background music widget for your Google Sites website. Select a template and click “Continue with this template” to get started.
How to add Background music to Google Sites
- 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. Since you are adding background music to Google Sites, select 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 Google Sites 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 Google Sites website.
HTML Background Audio Widget’s embed code
Embed code will include two parts: External JavaScript file and HTML div tag with a class attribute which is unique to your created Background music widget. You can easily embed the background audio widget into your Google Sites website by using the “Embed” block in Website Editor. Here’s how:
- Edit the page where you want to show background audio player on Google Sites.
- Add the Embed Block to your page. Click on “Embed Code” section.
- Paste the generated code into the Embed Code section.
- Save your changes and preview the widget on your Google Sites page.
The best part is you can display player on multiple websites regardless of whether they are made on Google Sites.
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 “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.
