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

如何使用 JavaScript 实现语音合成 (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事件，以应对可能出现的语音合成错误。

纠错
反馈