You've seen it on major publications. A small audio player sitting just below the headline, with a simple prompt: Listen to this article. Visitors press play and your content follows them into their commute, their kitchen, their workout.
It looks simple. And with the right setup, it is.
This guide covers exactly how to add a "Listen to This Page" button to any website, whether you're on WordPress, Webflow, Squarespace, or a custom-built site.
What you're actually building
A "Listen to This Page" button is an embedded audio player that reads your page content aloud to visitors. When someone clicks play, they hear a narrated version of your article without leaving the page.
The player typically sits just below your post title or featured image. It's unobtrusive when ignored and immediately useful when needed.
There are two ways to build this: manually, using browser APIs and custom code, or automatically, using a tool that handles generation and embedding for you. We'll cover both.
Option 1: The manual approach (free, limited)
Modern browsers include a built-in Web Speech API that can read text aloud. You can use this to build a basic listen button with a small amount of JavaScript.
Here's a minimal working example:
<button onclick="speakPage()">🔊 Listen to this page</button>
<script>
function speakPage() {
const text = document.querySelector("article").innerText;
const utterance = new SpeechSynthesisUtterance(text);
utterance.rate = 1;
utterance.lang = "en-US";
window.speechSynthesis.speak(utterance);
}
</script>
Drop this snippet anywhere in your post template and it will read the contents of your <article> tag aloud using the visitor's browser voice.
The real limitations of this approach:
The Web Speech API uses whatever voice the visitor's browser and operating system provide. On some devices this sounds natural. On others it sounds robotic. You have no control over the output, and it varies dramatically between Chrome, Safari, and Firefox.
There's also no progress bar, no speed controls, no pause-and-resume across page loads, and no way to style the player to match your site. It works as a proof of concept. It doesn't work as a real feature.
Option 2: Pre-generated audio (the right approach)
The better approach is to generate the audio file in advance, server-side, using a high-quality text-to-speech voice, and embed that audio file in a proper player on your page.
This gives you consistent voice quality regardless of the visitor's device, a real audio player with scrubbing and speed controls, and audio that sounds the same for every listener.
The tradeoff is that you need to generate audio for each post and keep it in sync when you make edits. You can do this manually using a TTS API, or automatically using a tool built for this purpose.
If you want to build it yourself
You can use a TTS API, ElevenLabs, Google Cloud TTS, and OpenAI all offer high-quality options, to generate an MP3 from your post content, then embed it with a standard HTML audio tag:
<audio controls style="width:100%; margin: 16px 0;">
<source src="/audio/my-post.mp3" type="audio/mpeg" />
</audio>
This works, but the workflow becomes manual fast. Every new post needs a generation step. Every edit means regenerating the file. Most publishers find this unsustainable after a few weeks.
If you want it to handle itself
This is what NarrateNow is built for. You add a single script tag to your site template:
<script
src="https://cdn.narratenow.app/widget.js"
data-site="YOUR_SITE_ID"
async
></script>
That's the entire installation. The script detects your page content automatically, generates audio, and renders a clean embedded player below your post title. When you update a post, the audio updates too. Every new page you publish gets a player without any additional steps.
How to install it on your specific platform
WordPress
In your WordPress dashboard, go to Appearance → Theme Editor and open your header.php or footer.php file. Paste the script tag just before the closing </body> tag. If you're using a page builder, most have a custom code section in their theme settings where you can paste it instead.
Alternatively, install a plugin like Insert Headers and Footers, which lets you add scripts without touching template files.
Webflow
Open your Webflow project and go to Project Settings → Custom Code. Paste the script tag in the Footer Code section. This applies it to every page on your site automatically.
Squarespace
Go to Settings → Advanced → Code Injection. Paste the script into the Footer field. Squarespace applies this to all pages sitewide.
Ghost
In your Ghost admin panel, go to Settings → Code Injection and paste the script into the Site Footer section.
Custom HTML site
Add the script tag just before your closing </body> tag in whatever template or layout file renders your blog posts.
What your visitors will see
Once installed, visitors to any blog post will see an audio player sitting cleanly below the article headline. The player includes:
- A play/pause button
- A progress bar they can scrub
- Current time and total duration
- A speed control (0.75×, 1×, 1.25×, 1.5×, 2×)
The player is designed to be unobtrusive, visitors who want to read can ignore it entirely. Visitors who want to listen have everything they need without leaving the page.
What to expect after you add it
Most sites see 10-20% of visitors interact with the audio player on any given post. That number sounds modest until you consider who those visitors are: they pressed play, which means they're committing several minutes to your content rather than skimming and leaving.
Time on page for audio listeners is typically 3-5x higher than for readers. Bounce rate drops. And your content becomes available in contexts, commutes, workouts, household tasks, where it was previously completely inaccessible.
The button itself is small. The impact on how people experience your content is not.
NarrateNow adds audio to every page on your site automatically. One script tag, no recording required. Try it free →