Add Narration to Your Blog

Text-to-speech (TTS) has become an increasingly popular way to engage audiences, especially for blogs. It enhances accessibility, caters to on-the-go readers, and adds a modern touch to your content.

I recently created an npm package to make adding text-to-speech voice narration to your website (blog or otherwise) — edge-tts-generator (npm link, GitHub repo)

Let's walk through how to use it (and why you'd want to!)

Why Narrate Your Blog?

Adding narration to your blog offers numerous benefits:

1. Accessibility: Helps visually impaired users or those who prefer listening.
2. Flexibility: Allows readers to consume content while commuting or multitasking.
3. Engagement: Enhances the user experience and retains visitors.

Meet edge-tts-generator

edge-tts-generator is a Node.js package that generates TTS audio using Microsoft's Edge Read Aloud API. With it, you can quickly transform your blog posts into audio files.

Features

• Free TTS: No hidden costs, as it uses a free API.
• Custom Voices: Choose from a range of voices and accents.
• Markdown Support: Automatically filters out unwanted elements for clean narration.
• Batch Processing: Generate multiple audio files in one go.

Browse and listen to voice samples

Getting Started

Step 1: Install the Package

First, install edge-tts-generator in your project. Using the --save-dev flag is recommended because this package is typically used as a development tool, generating assets during your build or pre-deployment phase rather than being required at runtime.

Copynpm install --save-dev edge-tts-generator

Step 2: Create a Narration Script

Next, create a script to generate narration for your blog posts. Below is an example file you can save as scripts/narration.ts:

Copyimport { textToSpeechMp3 } from 'edge-tts-generator';
import fs from 'fs';
import path from 'path';

async function generateNarration() {
  const blogPostPath = path.resolve(__dirname, '../blog/my-post.md');
  const outputPath = path.resolve(__dirname, '../public/audio');
  const fileName = 'my-post-narration';

  // Read blog content
  const text = fs.readFileSync(blogPostPath, 'utf-8');

  // Generate narration
  await textToSpeechMp3({
    text,
    outputPath,
    fileName,
    options: {
      voice: 'en-US-JennyNeural',
      speed: 1.2,
    },
  });

  console.log(`Narration saved as ${fileName}.mp3 in ${outputPath}`);
}

generateNarration().catch(console.error);

Step 3: Configure Your Script

Update the paths and parameters in the script to match your blog setup:

• Input File: Specify the path to your blog post file.
• Output Directory: Ensure your audio files are saved in an accessible directory (e.g., /public/audio).
• Voice and Speed: Customize these options to fit your blog's tone and pacing.

Step 4: Run the Script

Run your narration script with:

Copynpx tsx scripts/narration.ts

This will create an MP3 file for your blog post narration.

Using the CLI

If you'd prefer not to generate MP3 files programmatically, you can use the edge-tts-generator CLI tool. This approach is great for quick and straightforward narration generation without needing custom scripts.

npx edge-tts-generator <file> [options]

CLI Options

Example CLI Usage

To generate an MP3 file from a text file:

Copynpx edge-tts-generator examples/narrate.txt -v en-GB-RyanNeural -d ./public/audio -s 1.2

Advanced Features

Batch Processing

For blogs with multiple posts, use batch processing to generate audio for all posts:

Copyimport { batchTextToSpeechMp3 } from 'edge-tts-generator';

const posts = [
  { text: 'First blog post content', title: 'post1' },
  { text: 'Second blog post content', title: 'post2' },
];

async function generateAllNarrations() {
  await batchTextToSpeechMp3(posts, './public/audio', {
    voice: 'en-GB-RyanNeural',
    speed: 1.0,
  });
}

generateAllNarrations().catch(console.error);

Fetching Supported Voices

Explore all available voices to find the perfect match:

Copyimport { EdgeTTSClient } from 'edge-tts-generator';

async function fetchVoices() {
  const client = new EdgeTTSClient();
  const voices = await client.getVoices();
  console.log(voices);
}

fetchVoices().catch(console.error);

Integrating with Your Blog

Here are a few ways to integrate the generated narration into your blog:

1. Audio Player: Add an HTML <audio> element to your posts:

   Copy<audio controls>
     <source src="/audio/my-post-narration.mp3" type="audio/mpeg">
     Your browser does not support the audio element.
   </audio>

2. Dynamic Loading: Use JavaScript to dynamically load narration files.

3. RSS Feed: Include audio links in your RSS feed for podcast-style distribution.

Putting it all together

Adding narration to your blog not only broadens your audience but also keeps your content relevant and engaging. With edge-tts-generator, the process is straightforward and highly customizable.

If you need any help, feel free to pop into our Discord!