用 ElevenLabs 为 WordPress 网站加上 AI 语音播报功能

想象一下，你的网站能用品牌专属的声音朗读文章、回答问题或为产品演示配音。随着文本转语音（TTS）与声音克隆技术的成熟，这不再是遥不可及的未来功能——借助 ElevenLabs API，你完全可以在几个小时内把它搭建起来。本文将带你一步步构建一个支持语音播报的 WordPress 站点，并用一个轻量级插件把文章内容实时转成音频。

整体思路与前置条件

这套方案的核心逻辑非常清晰：WordPress 负责内容管理，ElevenLabs 负责语音合成，中间用一个几十行代码的插件把两者打通。完成后你将得到三样东西——一个把任意内容发送给 ElevenLabs 合成的 WordPress 插件、一个在页面上直接播放音频的前端控件，以及一个随时可供访客体验的在线站点。

在动手之前，你需要准备：一个 WordPress 站点（全新安装即可，插件会挂接到 WordPress 的内容管道上）；一个 ElevenLabs API 密钥，用于访问高质量 TTS 与声音克隆能力；以及对 PHP、JavaScript 和 cURL 的基础了解。整套工具都提供免费试用，示例代码完全开源，你可以根据品牌调性自由修改。

验证 ElevenLabs API

拿到 API 密钥后，第一步建议先用 curl 命令测试接口是否通畅，而不是直接动手写插件。这样可以快速确认密钥有效、声音 ID 正确，避免把问题留到后面的集成阶段。

curl -X POST "https://api.elevenlabs.io/v1/text-to-speech/voice-id" \
     -H "xi-api-key: YOUR_ELEVENLABS_API_KEY" \
     -H "Content-Type: application/json" \
     -d '{
           "text": "Hello, welcome to our voice-enabled site!",
           "voice_settings": {
               "stability": 0.75,
               "similarity_boost": 0.85
           }
         }' --output hello.mp3

把 voice-id 替换成你想使用的声音 ID（可以在 ElevenLabs 控制台中创建自定义克隆声音）。命令会返回一个 hello.mp3 文件，本地播放确认效果满意后，就可以进入 WordPress 集成环节。这里的两个关键参数值得留意：stability（稳定性）控制语调的一致性，similarity_boost（相似度增强）影响克隆声音与原声的接近程度，后续调试音色主要就靠这两个值。

ElevenLabs 的声音 ID 可以通过两种途径获取：一是直接使用平台预置的公共声音库（在控制台的 Voices → VoiceLab 页面浏览），每个声音条目旁边都有一个可复制的 ID 字符串；二是上传 1-3 分钟的本人录音创建「克隆声音」，平台会用深度学习模型提取声纹特征并生成专属 ID。克隆声音功能在 Creator 及以上订阅计划才可用，免费层只能使用公共声音库。stability 参数范围为 0–1，值越高语调越平稳但略显机械，值越低则更富情感起伏但可能出现不一致；similarity_boost 则控制克隆声音与原始录音的贴近程度，过高可能引入背景噪音或音质劣化。通常建议先从 stability: 0.75 / similarity_boost: 0.75 开始测试，再根据实际效果小步微调。

编写 WordPress 插件

把功能封装成插件的好处是可以在后台一键启用或停用，不污染主题代码。做法是在 wp-content/plugins 目录下新建 voice-tts 文件夹，并在其中创建 voice-tts.php。

插件的第一部分是注册一个短代码 [voice_tts]，用它来输出音频播放器：

<?php
/**
 * Plugin Name: Voice TTS for WordPress
 * Description: Sends post content to ElevenLabs and embeds an audio player.
 * Version: 1.0
 */
if ( ! defined( 'ABSPATH' ) ) { exit; }

function vt_tts_shortcode( $atts, $content = null ) {
    $post_id = get_the_ID();
    $text    = get_post_field( 'post_content', $post_id );
    $audio_url = vt_generate_audio( $text );
    if ( ! $audio_url ) {
        return '<p>Unable to generate audio at this time.</p>';
    }
    return sprintf(
        '<audio controls src="%s" style="width:100%%; margin-top:1rem;"></audio>',
        esc_url( $audio_url )
    );
}
add_shortcode( 'voice_tts', 'vt_tts_shortcode' );

第二部分是真正与 ElevenLabs 对话的辅助函数。它使用 WordPress 内置的 wp_remote_post 发请求，wp_strip_all_tags 清洗正文中的 HTML，然后把返回的 MP3 用文件名哈希的方式存到 uploads 目录：

function vt_generate_audio( $text ) {
    $api_key  = 'YOUR_ELEVENLABS_API_KEY';
    $voice_id = 'YOUR_VOICE_ID';
    $endpoint = "https://api.elevenlabs.io/v1/text-to-speech/{$voice_id}";
    $payload = [
        'text' => wp_strip_all_tags( $text ),
        'voice_settings' => [ 'stability' => 0.75, 'similarity_boost' => 0.85 ],
    ];
    $args = [
        'body'    => wp_json_encode( $payload ),
        'headers' => [ 'Content-Type' => 'application/json', 'xi-api-key' => $api_key ],
        'timeout' => 30,
    ];
    $response = wp_remote_post( $endpoint, $args );
    if ( is_wp_error( $response ) ) { return false; }
    $upload_dir = wp_upload_dir();
    $filename   = 'voice-' . md5( $text ) . '.mp3';
    $file_path  = trailingslashit( $upload_dir['path'] ) . $filename;
    file_put_contents( $file_path, wp_remote_retrieve_body( $response ) );
    return trailingslashit( $upload_dir['url'] ) . $filename;
}

这里用 md5($text) 作为文件名有个巧妙之处：内容相同时文件名也相同，相当于一个天然的缓存层，同一篇文章不会重复请求 API。写好后到后台 插件 → 已安装插件 激活，在任意文章或页面插入 [voice_tts] 短代码，页面加载时就会生成音频并嵌入播放器。

将 API 密钥和 Voice ID 硬编码在插件文件中仅适用于本地开发阶段。在多人协作或版本控制场景下，推荐改用 WordPress 的 wp_options 表存储敏感配置：通过 add_options_page() 在后台添加一个设置页，用 update_option() / get_option() 读写密钥，这样密钥不会出现在代码仓库中。更严格的做法是在服务器的 wp-config.php 或系统环境变量中定义常量（如 define('ELEVENLABS_API_KEY', getenv('ELEVENLABS_KEY'))），再在插件里用 defined() 读取，可完全隔离凭证与业务代码。wp_remote_post 是 WordPress 对 cURL/HTTP 的封装，它会自动处理 SSL 证书验证、超时重试等细节，比直接调用 curl_exec 更符合 WordPress 插件开发规范，也便于通过 pre_http_request 钩子进行单元测试拦截。

可选的「点击收听」前端控件

如果你不希望每篇文章都挂一个静态播放器，而是想给访客一个按需点击的「收听本文」按钮，可以在主题的 footer.php 中加入一段 JavaScript。它会在文章正文顶部动态插入一个按钮，点击后抓取正文文本、调用 REST 接口合成音频并即时播放：

<script>
document.addEventListener('DOMContentLoaded', () => {
    const btn = document.createElement('button');
    btn.textContent = '🔊 Listen to this article';
    document.querySelector('.entry-content').prepend(btn);
    btn.addEventListener('click', async () => {
        const text = document.querySelector('.entry-content').innerText;
        const response = await fetch('/wp-json/voice-tts/v1/generate', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ text })
        });
        const { audioUrl } = await response.json();
        new Audio(audioUrl).play();
    });
});
</script>

要让这段脚本工作，还需要在插件里通过 register_rest_route 暴露一个 REST 端点，内部调用 vt_generate_audio() 并把 URL 以 JSON 返回。这种交互方式的优点是让收听成为访客的主动选择，既提升体验又避免页面被静态播放器塞满。

示例中的 REST 端点需要通过 register_rest_route 在插件初始化时注册，通常挂载在 rest_api_init 动作上。一个最简实现如下：

add_action( 'rest_api_init', function() {
    register_rest_route( 'voice-tts/v1', '/generate', [
        'methods'  => 'POST',
        'callback' => function( $request ) {
            $text = sanitize_textarea_field( $request->get_param('text') );
            $url  = vt_generate_audio( $text );
            return $url ? [ 'audioUrl' => $url ] : new WP_Error( 'tts_failed', 'Generation failed', [ 'status' => 500 ] );
        },
        'permission_callback' => '__return_true',
    ]);
});

生产环境中 permission_callback 应替换为实际的权限校验逻辑（如验证 nonce 或要求用户登录），防止接口被滥用消耗 API 额度。前端 fetch 请求也建议附带 WordPress 生成的 nonce 令牌，并在服务端用 check_ajax_referer 或 wp_verify_nonce 验证，形成完整的 CSRF 防护。

测试与调优的几个要点

部署上线后，有几个细节决定了语音功能的最终体验。音频加载速度方面，由于插件会在首次请求后把 MP3 缓存到本地，再次访问同一篇文章时播放器几乎可以瞬间加载。音色调整方面，修改插件中的 $voice_id 可切换 ElevenLabs 里创建的任意声音，再配合调整 stability 和 similarity_boost 两个参数，就能找到最贴合品牌气质的语调。

对于高流量站点，建议把生成的 MP3 放到 CDN（例如 Cloudflare）上以降低延迟——插件已经把文件写入 wp-content/uploads 目录，便于直接分发或接入缓存层。如果遇到 403 Forbidden 错误，优先检查 API 密钥是否正确、服务器是否放行了出站 HTTPS 连接。

延展方向

这套组合的价值在于轻量和可扩展：一个强大的语音 API、一个几十行的插件，就能让网站具备「开口说话」的能力。更重要的是，同样的思路可以延伸到更多场景——把它接到播客生成、在线课程的内容朗读，甚至做成交互式语音问答机器人。先用一篇文章验证流程跑通，再逐步扩展应用边界，是比较稳妥的迭代节奏。

需要提醒的是，示例代码为了便于演示把 API 密钥直接硬编码在插件里，生产环境应改用 WordPress 的设置项或环境变量来存储密钥，避免泄露。此外每次合成都会消耗 ElevenLabs 的字符额度，长文章和高流量场景下务必做好缓存与成本评估。