How to add an audio player to your website (no code)

Putting an audio player on a website used to mean a plugin, a hosting decision, and a fight with your theme. It's now one line of HTML. This covers the fast path, the two variations worth knowing, and the handful of details that decide whether it works properly.

The fast path

Create a player at app.butterreader.blog, style it, and paste its snippet where you want it to appear:

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

That's the install. The widget injects the player exactly where the script tag sits.

Controlling placement precisely

Sometimes "where the script tag sits" isn't where you want the player — inside a grid, or in a template where the script has to live at the bottom. Give it a container to mount into:

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

The player renders into the div, and the script can go wherever your template prefers.

Two kinds of player

Worth being clear about which you need, because it changes the setup.

Generating players create audio from the text on the page using text to speech. You upload nothing. This is what you want for articles and blog posts — audio appears on new posts automatically.

Upload players wrap an audio file you already have: a track, an episode, a recorded message. This is what you want for music or anything pre-recorded.

Same embed either way; the difference is how the player is configured.

Where to put it

Above the fold, in the content column, under the heading. A player at the bottom of a page is a player nobody presses — anyone who wanted to listen has already gone. This one decision affects play rate more than any styling choice you'll make.

Making it look like your site

A default grey bar reads as bolted-on. At minimum, set the colours and shape to match, and decide whether it carries a visualizer or stays minimal. Because styling lives on the player rather than the snippet, changing your mind later updates every page at once instead of requiring you to re-paste anywhere. More on why this matters.

One player per page

Use a single player per page. For a blog, the same player ID goes on every post — the widget reads whichever page it's currently on and narrates that page's content. One snippet in your post template covers your entire archive, including posts you haven't written.

If it reads the wrong text

For generating players, the widget finds your article by looking for the first <h1>, then the nearest <article>, <main>, [role="main"], .entry-content, or .post-content around it. Inside, it reads <p>, <h2>–<h6>, <li>, and <blockquote> — and strips nav, header, footer, and anything whose class or id contains sidebar, comment, share, related, meta, and similar.

Two failure modes follow from that:

Empty or partial narration. Your paragraphs are in bare <div>s, which the reader skips. Page builders do this; standard CMS blocks don't.

Wrong title announced. Your theme uses <h1> for the site name before the post title. The widget takes the first one. Fix the theme — it's also a basic on-page SEO problem.

Content must also be present at page load; text inside collapsed tabs or injected later by JavaScript may be missed.

Length

Roughly 4,000 characters per conversion, trimmed at a sentence boundary. That covers most posts. For a very long guide, giving the audio version a focused intro tends to serve listeners better than narrating 6,000 words nobody finishes.

Platform notes

WordPress works out of the box because themes already wrap posts in <article> and .entry-content — step-by-step here. Wix needs an Embed HTML element. Webflow is div-heavy but its Rich Text element outputs real <p> tags, so detection works; setting the player's content selector to .w-richtext makes it exact.

Before you publish

Listen to the first thirty seconds. Proper nouns, acronyms, and homographs are where synthetic voices slip, and thirty seconds catches nearly all of it.

Start free.