ai newsFr., 6. Nov.

How to Use ElevenLabs with WordPress

Voice AI Meets WordPress: How to Use ElevenLabs for Text‑to‑Speech and Voice Cloning If you’ve been following the surge in AI‑generated content, you’ve probably heard about text‑to‑speech (TTS) and voice cloning. Imagine turning your WordPress blog posts, help‑center articles, or even product video

dev.toFreitag 04:12 · 06.11.3 Min. Lesezeit
Bild: dev.to

If you’ve been following the surge in AI‑generated content, you’ve probably heard about text‑to‑speech (TTS) and voice cloning. Imagine turning your WordPress blog posts, help‑center articles, or even product videos into high‑quality spoken audio—right on the same page, with a voice that matches your brand. That’s exactly what ElevenLabs offers: a cloud‑based TTS engine that delivers natural‑sounding speech and lets you clone voices from just a few seconds of audio.

Below, I’ll walk you through setting up ElevenLabs in a WordPress environment, from API registration to generating, storing, and serving audio on your site. Whether you’re a seasoned developer or a WordPress hobbyist, this guide gives you the code snippets and best‑practice tips you need to get your audio workflow up and running.

If you’re ready to add a new dimension to your WordPress content, start here: https://try.elevenlabs.io/kr07zfuqn1bp

Tip: Store the key in WordPress as a site option or environment variable so it’s not hard‑coded in your theme files.

Instead of sprinkling code across functions.php, let’s encapsulate everything in a tiny plugin called elevenlabs-tts. Create a folder in wp-content/plugins/elevenlabs-tts and add an elevenlabs-tts.php file.

Open any post or page editor and insert:

[elevenlabs_tts] Enter fullscreen mode Exit fullscreen mode When the page renders, the shortcode calls el_generate_tts_audio(), sends the post content to ElevenLabs, stores the resulting MP3 in the uploads folder, and returns an <audio> tag. The first visit will generate the file; subsequent visits will reuse the cached MP3.

/** * Register REST route for TTS. */ add_action ( 'rest_api_init', function () { register_rest_route ( 'el/v1', '/synthesize', [ 'methods' => 'POST', 'callback' => 'el_rest_synthesize', ]); }); /** * REST callback that forwards to ElevenLabs. */ function el_rest_synthesize ( WP_REST_Request $request ) { $text = $request -> get_param ( 'text' ); $audio_url = el_generate_tts_audio ( $text ); if (! $audio_url ) { return new WP_REST_Response ([ 'error' => 'Failed to generate audio' ], 500 ); } return new WP_REST_Response ([ 'url' => $audio_url ], 200 ); } Enter fullscreen mode Exit fullscreen mode Then, in your theme or a custom JS file:

async function synthesize ( text ) { const res = await fetch ( ' /wp-json/el/v1/synthesize ', { method: ' POST ', headers: { ' Content-Type ': ' application/json ' }, body: JSON. stringify ({ text }) }); const data = await res. json (); if ( data. url ) { const audio = new Audio ( data. url ); audio. play (); } else { console. error ( ' Synthesis error: ', data. error ); } } Enter fullscreen mode Exit fullscreen mode Security Note: This endpoint is public. If you’re exposing it, consider adding nonce validation or limiting usage to logged‑in users.

ElevenLabs’ voice cloning is a game‑changer for branded audio. Here’s a quick rundown:

function el_generate_tts_with_clone ( $text, $voice_id ) { $api_url = 'https://api.elevenlabs.io/v1/text-to-speech/'. $voice_id; // Rest of the request is identical to el_generate_tts_audio() } Enter fullscreen mode Exit fullscreen mode Tip: Store the voice_id in your site options or a dedicated table so you can reference it across all posts.

Once set up, your audience can listen to any article right on the page, improving accessibility and engagement.

Adding AI‑powered voice to your WordPress site doesn’t have to be a complex engineering project. ElevenLabs gives you a clean API, realistic voices, and a voice‑cloning feature that can make your content feel truly branded. By integrating it into a small plugin, you keep everything modular, testable, and maintainable.

Give it a try, experiment with different voices, and watch your content come alive. Ready to turn words into sound? Dive in with ElevenLabs today: https://try.elevenlabs.io/kr07zfuqn1bp

Quelle: dev.to (dev.to). Original öffnen