HTML Background Music Widget
Create your Background Music widget
Screenshots
Why People Love Elfsight
Music has a way of making a moment memorable. With the Elfsight Background Music widget, you can add background music to HTML pages in just a couple of clicks. Whether it’s calm instrumentals for a portfolio, upbeat tracks for an event page, or even seasonal playlists for a shop – you set the tone, and your visitors feel it instantly.
It’s quick to set up and even easier to manage. You don’t need to know how to add background music to HTML manually, or tinker with complicated scripts. Just design your player, copy one line of code, and paste it where you want the music to play.
Did you know?
A consumer survey found that 70% of customers feel more connected to a brand when listening to its tailored music selections.
Let your brand make that connection – add Background Music with Elfsight for free today and let your visitors feel what your brand sounds like.
Key Features of the HTML Background Music Widget
Here’s what makes this widget stand out:
- Custom player styles: Match your music controls with your brand colors and fonts.
- Flexible playback: Choose whether to autoplay, loop, or let visitors control playback.
- Multiple tracks: Add one song or a whole playlist – perfect for special campaigns.
- Works everywhere: From portfolios to online stores, it’s easy to embed or play background music in HTML.
- Beginner-friendly: If you can copy and paste text, you can set this up—no need to edit HTML code for background music by hand.
- Responsive design: The player works smoothly on desktop, tablet, and mobile.
How to Add Background Music to HTML
You’ve got two simple ways to make it work:
Method 1: Inline Music Player
Great if you want music to play only on certain pages, like your homepage or a landing page. The player sits neatly inside your content where you place it.
- Select a Template: Open the Elfsight editor and pick your player style.
- Customize the Widget: Upload your tracks or link your source, adjust autoplay, loop, and volume settings.
- Generate the Code: Click “Add to website” and copy the code snippet.
- Embed on the Website: Paste it right where you want the player to appear in your HTML page.
Method 2: Floating Music Player
Ideal if you’d like the soundtrack to follow people as they scroll. The floating player stays visible at the bottom or side of the screen, so your music is always just a click away.
- Pick a Template: Select a floating layout like a bottom bar or sidebar.
- Customize the Widget: Add tracks, set design, playback, and playlist options.
- Generate the Code: Once you finish the customization, click “Add to website for free”, and copy the embed code from the editor.
- Embed on Your Website: Paste it into your HTML just before the closing
</body>tag so it appears across the entire website.
Need more guidance? Visit our Help Center, explore our blog article on how to add background music to your website. Feel free to share new ideas in the Wishlist. For recent updates, check the Changelog.