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

How do I add an audio player to my website?

ButterReader adds an audio player to any website with one line of embed code: create a player, paste the snippet where you want it, and the player either narrates the page's text or plays a file you upload. No plugin or hosting setup is needed.

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

ButterReader narrates the whole article, up to 60,000 characters, and generates long posts in chunks automatically. Your monthly cap is 10,000 characters on the free plan and 100,000 on Pro; Gemini voices count 2 credits per character. 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.

What should I look for in a free website audio player?

ButterReader's free plan is a real free plan, not a trial: 10,000 characters a month, one player, and both player types (generate and upload). Whichever player you choose, check that it:

• Looks like your site. Colors, shape and type should match, not a default grey bar.
• Loads without slowing the page. One script tag, loaded with the page.
• Works on mobile. Test it on a phone before publishing.
• Can be used with a keyboard and a screen reader. Test the controls yourself.
• Lets you leave. Removing the snippet should remove the player, with nothing left behind.

What is an audio widget?

ButterReader's player is an audio widget: a small, self-contained player you drop into a page with an embed code, as opposed to a plugin or a theme change. A narration widget generates audio from the page's text; an upload widget plays a file you provide.