How to Use ElevenLabs in WordPress

ElevenLabs is a powerful text-to-speech service known for its high-quality voice synthesis. If you want to integrate ElevenLabs into your WordPress site, this guide will walk you through the setup process and explore several integration methods, including using the WordPress audio block, the ElevenLabs Audio Native feature, a programmatic solution, and a dedicated plugin.

Why Use ElevenLabs With WordPress

1. Enhanced User Experience: Providing audio versions of your content can engage users who prefer listening over reading.
2. Accessibility: It can help make your site more accessible to users with visual impairments.
3. Content Repurposing: Audio content can be repurposed for podcasts, audio guides, or even social media.

Getting Started With ElevenLabs

Here’s how to get started with ElevenLabs, from creating an account to generating an API key.

1. Visit the ElevenLabs website and sign up for an account.
2. Proceed to the ElevenLabs App, go to Projects, open the My Account menu, and select API Keys. The site will display a modal window with all your API keys.
3. If there are no existing API Keys, click the Create Key button to create one key.

Integrate ElevenLabs in WordPress

We are now going to explore multiple possibilities for integrating ElevenLabs in WordPress.

Manually Add an Audio Player

A straightforward solution is to manually generate the audio files from the ElevenLabs site and then upload them to WordPress.

First, proceed to the ElevenLabs App and enter the text you want to convert to audio. Select the voice and then click the Generate speech button. Wait a few seconds, and then click the download icon on the right of the audio player.

The final step is to create an audio player that references this file. This process can be done using the Audio block and then uploading the audio file or inserting the URL of the audio file.

Using the ElevenLabs Audio Native Player

Audio Native is an audio player provided by ElevenLabs that automatically generates spoken audio using the ElevenLabs API.

The process to include the Audio Native player in WordPress involves these steps:

1. From the Audio Native Settings, click on Add URL and enter the URL of your WordPress site. This operation is necessary to whitelist your site; in other words, you will allow the Audio Native player to work only on your WordPress site.
2. Copy the embed code from the same settings page. This is the HTML used to activate the player on the page.
3. Include the embed code in your WordPress site using your favorite method. The ElevenLabs documentation has a dedicated Audio Native WordPress integration documentation page, which suggests the use of the WPCode plugin to include the embed code.

A couple of considerations on the Audio Native player:

• With Audio Native, you can choose to automatically voice the site, allowing the audio player to retrieve the post or page content, or manually generate spoken audio for the WordPress post by creating an ElevenLabs project in advance. The choice between these modes depends on your specific needs.
• The Audio Native player also collects metrics, retention statistics, and more. Consider using it if you need these data.

Create a Custom WordPress Plugin

The following WordPress plugin will add a player that uses the audio file manually generated with the ElevenLabs app.

First, configure a post meta used to save the URL attribute of the HTML audio player. This can be done programmatically or with plugins like ACF. An appropriate name for this post meta is, for example, spoken_audio_url. Steps for creating post meta are not included here, but many guides are available online, like this one from WPBeginner.

Next, add the code to automatically include an audio player that references our audio file at the beginning of the post. In this example, I used the the_content filter:

// Filter the content and add an audio player to the beginning of the post content.
add_filter( 'the_content', 'add_player_html' );

function add_player_html( $content ) {

	// HTML audio player with src attribute set to the URL save in the spoken_audio_url post meta.
	$player_container = '<audio controls><source src="' . esc_url( get_post_meta( get_the_ID(), 'spoken_audio_url', true ) ) . '" type="audio/mpeg"></audio>';

	return $player_container . $content;

}

If you are planning to place the audio player in custom positions on the page, you can alternatively use a shortcode.

// Add the shortcode used to display the audio player.
add_shortcode( 'elevenlabs-spoken-audio', 'return_audio_element' );

function return_audio_element() {

	// Return the HTML audio element, again with the URL of the audio file stored in our post meta.
	return '<audio controls><source src="' . esc_url( get_post_meta( get_the_ID(), 'spoken_audio_url', true ) ) . '" type="audio/mpeg"></audio>';

}

Using this second method, you can place the audio player in your post by adding the [elevenlabs-spoken-audio] shortcode using the Shortcode editor block.

Keep in mind that, similar to the previous solution, this method requires first manually creating the audio files through the ElevenLabs online UI.

Integration With a WordPress Plugin

In this section, I will cover using Real Voice, a versatile TTS plugin that supports multiple TTS services (including ElevenLabs) and that comes with a seamless integration in the WordPress back end.

The advantage of using this plugin over previous methods is that it lets you create and manage audio files, as well as configure ElevenLabs settings, all directly within the plugin without needing to access the ElevenLabs app.

The ElevenLabs Integration

From the general plugin options, select ElevenLabs (Cloud service) as the text-to-speech converter.

Enter the ElevenLabs API key in the dedicated option.

To conclude, save the options. In the next section, we will test a text-to-speech conversion.

Voice Your WordPress Articles

You can now convert your article to audio by clicking the Generate file button in the dedicated block editor sidebar.

The plugin will generate a message that tells you if the TTS conversion was successful or if an error occurred while communicating with the ElevenLabs API.

If the TTS conversion was successful, visit the article to listen to the audio version generated with ElevenLabs.

Note that the plugin saves the generated audio files in MP3 format, storing them in the WordPress upload folders. Technically, the plugin maintains references to these audio files through post meta.

Regarding maximum article length, ElevenLabs supports conversions of up to 30,000 characters, a generous limit that should cover most articles. If your article exceeds this limit, the plugin will make multiple requests to ElevenLabs, and the resulting audio files will be concatenated in the front end using JavaScript.

Monitor the API Calls to ElevenLabs

You can track the requests sent to the ElevenLabs API using the dedicated API Log menu in the plugin.

To view only requests sent to ElevenLabs, click the ElevenLabs pill button to filter the data. The example below lists a series of requests to the ElevenLabs API. The first request has been sent without providing an API key. This resulted in the response “Error: Invalid API key”. The latest nine requests have been successful, and text has been properly converted to audio; for these requests, the log reports the “Success” message.

Using Advanced ElevenLabs Features

ElevenLabs offers some unique advanced features. Let’s see how to use them in using this plugin.

Selecting a Voice

Using the Voice option, you can select from a list of existing voices. If instead you want to select a voice that is not present in this list, use the Voice ID option. This last option should be used, for example, if you are planning to use voice cloning, the feature that clones your voice using a provided audio recording.

Models

Converting a long article may take minutes with ElevenLabs. However, you can speed up the process using alternative models, specifically with the Turbo v2 or Turbo v2.5 models. Select your model using the Model field in the ElevenLabs section of the plugin. See this document for more techniques to reduce latency. It’s worth noting that the model can also be chosen for reasons different from performance, for example, for multilingual support or based on the expected accuracy level. See the latest model in the Models documentation.

Customize the Voice Performance

Use the Stability, Similarity, Style Exaggeration, and Speaker Boost options for tailored voice performance. These options allow you to tailor the voice for your specific scenario by controlling aspects such as stability and randomness between each generation, how closely the AI should adhere to the original voice, and more. Check out the Voice Settings page for more information.