Some websites try to keep music playing while people go from page to page. That sounds cool. But many times, this ends up being really annoying. People hate when music starts without warning. It feels like the website is being pushy.
This guide will help you set up a music player the right way. It should play across all your pages, but it should also be nice to the people who visit your site. You will learn how to make a smooth music experience. One that works with today’s web rules. One that doesn’t make people leave right away.
Always Let Users Be in Control
You can’t just play music right away when someone opens your website. That’s how websites worked many years ago. But now, that doesn’t fly. People want to choose what they hear. They want control.
So what’s the fix?
The right way is called a “sticky” or “persistent” player. That just means the music player stays on the page while someone clicks around your site. But the user has to press play first. It doesn’t start on its own.
If someone doesn’t press play, nothing should happen. If they press pause, the music should stay paused—even if they go to another page.
Why You Can’t Autoplay Music Anymore
A long time ago, developers used things like <bgsound> to start music without asking. Today, that’s not allowed.
Now, browsers like Chrome and Safari block any autoplay sound. They do this to stop bad user experiences. These browsers look at something called the Media Engagement Index (MEI). If someone doesn’t interact with your site a lot, the browser stops the music from starting on its own.
So here’s the truth: trying to autoplay sound will only break your site. It won’t work on many devices. And it makes people angry. If you want the music to work for everyone, mute it by default. Or better—don’t autoplay at all.
What Makes a Sticky Player Work
If your music player reloads every time someone clicks a link, that’s not good. That breaks the song. It restarts or stops completely.
What you want is a player that stays in place. The rest of the page can change, but the player keeps going.
There are two smart ways to do this:
1. Use a Single-Page App (SPA)
Apps like React, Vue, or Next.js work in a smart way. Instead of loading a new page, they only load part of the page. The music player stays put.
This way, the player doesn’t reload or stop when someone clicks to another page.
2. Use JavaScript to Keep the Music Going
If you have a normal website with many pages (like WordPress), you can still keep music going.
You’ll need JavaScript. It will:
- Save the song name, time, and volume in browser memory
- Use tools like Turbolinks or Pjax to load pages without refreshing
- Restart the song at the same place after the new page loads
It’s a bit more work, but it makes things smooth.
Pick Your Path: Tools or Code
You have two choices. One is fast and easy. The other gives you full control.
Option 1: Use a Plugin or Widget
This is best for people who use WordPress, Wix, or Shopify.
You don’t need to know coding. Just pick a tool and add it to your site.
Here are some examples:
| Tool Type | Best For | Pros | Cons |
|---|---|---|---|
| WordPress Plugin | People selling music | Deep features | May slow down your site |
| Cross-Platform Widget | Any website builder | Easy to add | Some cost money |
| Streaming Embed (Spotify, etc.) | Showing one song | Super easy | Stops on page change |
These tools often do the hard work for you. But you might not be able to change everything you want.
Option 2: Code It Yourself
If you or your team knows how to code, this is the most powerful way.
You use the normal HTML <audio> tag. Then use JavaScript to make it smart.
Here’s a simple audio player:
<audio controls id="site-audio-player">
<source src="track-1.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
With JavaScript, you can check if the music is playing before a page loads. You can also keep it playing after the new content shows up. It’s more work, but very smooth when done right.
5 Smart Tips for Making a Music Player That People Like
Even with good code, your player can still be annoying if you don’t think about the user. So here are five things you must do.
1. Don’t Load Big Audio Files Right Away
Big files slow down your site. This hurts your SEO score and makes people leave.
Instead, wait until someone hits play. Load just the small player first. Load the actual audio only after the click.
This saves data and keeps your site fast.
2. Make It Easy to Use on Phones
Phones have small screens. People use thumbs to tap. So:
- Make buttons big (at least 44×44 pixels)
- Keep the player at the bottom or side of the screen
- Don’t block the main content
If people can’t use your player easily, they’ll give up.
3. Match Your Player With Your Site
A player that looks different feels cheap.
- Use the same colors, fonts, and borders as the rest of your site
- Don’t make it too flashy
- Always show what song is playing and who the artist is
A good player feels like part of the website, not a pop-up ad.
4. Remember What the User Did
If someone pressed pause, your player should remember that—even on a new page.
Save their volume level and track number in the browser. Use Local Storage.
When they come back, start where they left off. This small detail makes a big difference.
5. Always Add a Mute Button
Some people get surprised by sound. Others just want quiet.
You must have an easy-to-find mute or volume control. Put it in a place where everyone can see it right away.
Respect is key. Give people the power to stop the sound fast.
Final Words: Make Music a Nice Surprise, Not a Bad One
You shouldn’t force music on your users. You should offer it. Let them choose. That’s how you win.
Don’t try old tricks like autoplay. They don’t work anymore. They also break trust.
If you use a sticky player, keep it clean. Make it fast. Let users control everything. And most of all—make sure it doesn’t feel like a pop-up ad.
When you build it the right way, a music player can make your website better. It can make people stay longer. But only if you respect their space.