How to add a music player to your website

Putting your track, mix, or episode on your own site — rather than only on a streaming platform — takes one snippet. This covers the setup, and the decisions that matter more than the setup does.

Why host music on your own site at all

Streaming platforms are for discovery. Your site is for the people who already found you, and there are things it does better:

You own the presentation. No competing recommendations, no algorithm suggesting someone else at the end of your track.

No account required. A visitor plays it immediately. Every extra step between arriving and hearing the music loses people.

It's your brand, not theirs. A player styled to match your site reads as part of the work rather than an embed from somewhere else.

Unreleased and exclusive material. Demos, alternate mixes, and client work that shouldn't sit in a public catalogue.

The setup

Create a player at app.butterreader.blog, upload your audio, style it, and paste:

<script src="https://butter-reader.web.app/widget/AudioPlayerWidget.bundle.js"
        data-player-id="YOUR_PLAYER_ID"></script>

The player renders where the script tag sits. To place it precisely — inside a grid or a template where scripts belong at the bottom — give it a container:

<div data-butter-player-id="YOUR_PLAYER_ID"></div>

Upload, not generate

Worth flagging, because it's the fork that confuses people. Some players generate audio from the text on the page using text to speech — that's for articles and blog posts. For music you want an upload player: you bring the file, the player wraps it in your styling.

Same embed snippet; different configuration.

Add a visualizer

This is the part that separates a music page that works from one that doesn't. A static grey bar gives a visitor nothing to look at while your track plays, and a page with nothing happening invites a tab switch.

A beat-reactive visualizer responds to the low end, so the motion follows the kick rather than wobbling along with everything at once. Match the style to the material — hard-edged bars for percussive tracks, slower deformation for ambient. Other styles here.

Practical details worth getting right

File format. MP3 for compatibility, AAC if you want better quality at the same size. Both play everywhere.

Bitrate. 128–192kbps is the sweet spot for web streaming. Higher gains little over laptop speakers and phone earbuds, and costs load time.

Loudness. Normalise across your catalogue. A visitor who adjusts volume for track one and gets blasted by track two leaves.

Never autoplay. Browsers block it, and visitors hate it. A play button that's obviously a play button outperforms any autoplay trick.

Above the fold. The music is why they're on the page. Don't make them scroll to it.

Mobile

Most listening is on phones. Check that controls are big enough for a thumb, the layout doesn't overflow on a narrow screen, and playback survives a screen lock. Also watch the weight of the page — a visualizer runs an animation loop every frame, so it should stop when playback is paused.

Multiple tracks

For a catalogue, keep the styling consistent across every player so the page reads as one body of work. Because styling is defined on the player rather than in the snippet, restyling later updates every page at once — you never re-paste.

If you're listing many tracks, use a compact treatment. Twenty full spectrum analysers on one page fight each other and cost real performance.

Platform notes

The same snippet works on WordPress via a Custom HTML block, on Wix via Embed HTML, and on Webflow, Squarespace, Ghost, or hand-written HTML. Nothing is platform-specific, so migrating later doesn't mean rebuilding your audio.

If you also write

If your site has a blog alongside the music, the same account covers narrated posts — see adding an audio player to a website for the generating side.

Start free.