如何使用 JavaScript 实现语音合成 (Web Speech API)？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

// www.javascriptcn.com code example
// 检查浏览器是否支持 Web Speech API
if ('speechSynthesis' in window) {
  const synth = window.speechSynthesis;
  let utterance = null; // 用于存储当前语音合成实例

  /**
   * 合成语音
   * @param {string} text 要合成的文本
   * @param {object} options 可选的语音合成配置，包含 voice, rate, pitch, volume
   *   - voice: 语音对象，可通过 getVoices() 方法获取
   *   - rate: 语速，默认值1，范围为0.1到10
   *   - pitch: 音调，默认值1，范围为0到2
   *   - volume: 音量，默认值1，范围为0到1
   */
  function speak(text, options = {}) {
     if (utterance) {
         synth.cancel(); // 如果有正在播放的语音，先取消
     }

     utterance = new SpeechSynthesisUtterance(text);

      // 配置语音
     if (options.voice) {
         utterance.voice = options.voice;
     }
     utterance.rate = options.rate || 1;
     utterance.pitch = options.pitch || 1;
     utterance.volume = options.volume || 1;


     synth.speak(utterance);
  }

    /**
     * 获取可用的语音列表
     * @returns {Promise<SpeechSynthesisVoice[]>} 可用的语音列表
     */
    function getVoices() {
        return new Promise(resolve => {
            let voices = synth.getVoices();
            if (voices.length > 0) {
                resolve(voices);
            } else {
                 synth.onvoiceschanged = () => {
                    resolve(synth.getVoices());
                };
            }
        });
    }


  // 提供一个示例调用
  getVoices().then(voices => {
      if (voices.length > 0) {
          const defaultVoice = voices.find(voice => voice.default) || voices[0] // 使用默认或者第一个语音
           speak("你好，我是使用Web Speech API合成的语音", { voice: defaultVoice, rate: 1, pitch: 1, volume: 1 });
      }
  });

    // 可选：监听语音合成事件
    synth.addEventListener('start', () => {
        console.log('语音合成开始')
    });
    synth.addEventListener('end', () => {
        console.log('语音合成结束')
        utterance = null;
    });
    synth.addEventListener('error', (event) => {
        console.error('语音合成错误', event.error);
        utterance = null;
    });

} else {
  console.error('您的浏览器不支持 Web Speech API');
}

本题详细解读

Web Speech API 提供了一种在浏览器中进行语音合成的能力，允许开发者通过 JavaScript 将文本转换为语音。其核心接口是 SpeechSynthesis 和 SpeechSynthesisUtterance。

SpeechSynthesis

window.speechSynthesis 是一个 SpeechSynthesis 接口的实例，它是语音合成功能的入口。
speechSynthesis.speak(utterance): 将一个 SpeechSynthesisUtterance 对象加入语音合成队列，并开始播放。
speechSynthesis.pause(): 暂停当前的语音合成。
speechSynthesis.resume(): 恢复被暂停的语音合成。
speechSynthesis.cancel(): 取消当前正在播放的和队列中所有待播放的语音合成。
speechSynthesis.getVoices(): 返回一个 SpeechSynthesisVoice 列表，表示可用的语音。
speechSynthesis.onvoiceschanged: 当可用的语音列表发生变化时触发的事件。
speechSynthesis.addEventListener('start', callback): 添加一个监听器，在语音合成开始时触发回调。
speechSynthesis.addEventListener('end', callback): 添加一个监听器，在语音合成结束时触发回调。
speechSynthesis.addEventListener('error', callback): 添加一个监听器，在语音合成出错时触发回调。

SpeechSynthesisUtterance

new SpeechSynthesisUtterance(text): 创建一个新的 SpeechSynthesisUtterance 对象，用于配置要合成的文本和其他参数。
utterance.text: 要合成的文本内容。
utterance.voice: 要使用的语音，是一个 SpeechSynthesisVoice 对象。
utterance.rate: 语速，默认值为 1，可以设置的范围为 0.1 到 10。
utterance.pitch: 音调，默认值为 1，可以设置的范围为 0 到 2。
utterance.volume: 音量，默认值为 1，可以设置的范围为 0 到 1。
utterance.lang: 设置语音的语言。

实现步骤

检查浏览器支持: 首先要检查 speechSynthesis 是否存在于 window 对象中，判断当前浏览器是否支持 Web Speech API。
获取 SpeechSynthesis 实例: 如果支持，就通过 window.speechSynthesis 获取实例。
创建 SpeechSynthesisUtterance 对象: 使用 new SpeechSynthesisUtterance(text) 创建一个实例，并将需要合成的文本作为参数传入。
配置语音选项: 可以设置 voice， rate，pitch 和 volume 等属性来调整语音的特性。
获取可用语音列表: 使用 speechSynthesis.getVoices() 获取语音列表。如果列表为空, 可能需要监听 onvoiceschanged事件。
选择合适的语音: 可以从 getVoices 返回的列表中，根据需要选择特定语音。
开始语音合成: 调用 speechSynthesis.speak(utterance) 开始将文本合成为语音。
处理事件: 可以监听 start，end 和 error 事件，以便在合成开始、结束或出现错误时进行相应处理。
取消播放: 在新语音开始播放前，取消当前播放的语音实例。
避免内存泄露: 在语音播放结束后，将 utterance 置空。

注意事项

不同的浏览器和操作系统可能会提供不同的语音。
一些浏览器可能需要用户权限才能进行语音合成。
需要使用HTTPS协议或者localhost地址来避免出现安全问题。
getVoices()返回的语音列表可能不是立即可用，需要通过监听onvoiceschanged事件来确保获得所有可用语音。
需要注意正确处理error事件，以应对可能出现的语音合成错误。