快捷導(dǎo)航

原生JavaScript再網(wǎng)頁實(shí)現(xiàn)文本轉(zhuǎn)語音功能

更新時(shí)間：2025年03月17日 15:52:30 作者：bbamx.

這篇文章主要為大家詳細(xì)介紹了如何通過原生JavaScript再網(wǎng)頁實(shí)現(xiàn)文本轉(zhuǎn)語音功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下

1、原理

語音合成 (也被稱作是文本轉(zhuǎn)為語音，英語簡(jiǎn)寫是 tts) 包括接收 app 中需要語音合成的文本，再在設(shè)備麥克風(fēng)播放出來這兩個(gè)過程。

Web API中對(duì)此有一個(gè)主要控制接口 SpeechSynthesis，外加一些處理如何表示要被合成的文本 (也被稱為 utterances)，用什么聲音來播出 utterances 等工作的相關(guān)接口。同樣的，許多操作系統(tǒng)都有自己的某種語音合成系統(tǒng)，在這個(gè)任務(wù)中我們調(diào)用可用的 API 來使用語音合成系統(tǒng)。

2、示例

可以直接復(fù)制下面代碼運(yùn)行在瀏覽器中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
  </head>
  <body>
    <div>
      <input type="text" />
      <button>開始播放語音</button>
    </div>
  </body>
  <script>
    const btn = document.querySelector('button')
    const ipt = document.querySelector('input')
 
    function speak({ text, speechRate, lang, volume, pitch }, endEvent, startEvent) {
      if (!window.SpeechSynthesisUtterance) {
        console.warn('當(dāng)前瀏覽器不支持文字轉(zhuǎn)語音服務(wù)')
        return
      }
      if (!text) {
        return
      }
      const speechUtterance = new SpeechSynthesisUtterance()
      speechUtterance.text = text
      speechUtterance.rate = speechRate || 1
      speechUtterance.lang = lang || 'zh-CN'
      speechUtterance.volume = volume || 1
      speechUtterance.pitch = pitch || 1
      speechUtterance.onstart = function (e) {
        startEvent && startEvent()
      }
      speechUtterance.onend = function (e) {
        endEvent && endEvent()
      }
      speechSynthesis.speak(speechUtterance)
 
      return speechUtterance
    }
 
    btn.addEventListener('click', function () {
      if (!ipt.value) return
      speak(
        {
          text: ipt.value,
        },
        function () {
          console.log('語音播放結(jié)束')
        },
        function () {
          console.log('語音開始播放')
        }
      )
    })
  </script>
</html>

支持的瀏覽器

Firefox 桌面版和移動(dòng)版。
Firefox OS 2.5+。
Chrome 桌面版和安卓版。

注意：如果效果演示失敗，大概是由于您當(dāng)前使用的瀏覽器不支持語音轉(zhuǎn)文字這個(gè)API，請(qǐng)更換瀏覽器后重試！

3、解析speak函數(shù)

接受參數(shù)

text：要轉(zhuǎn)換為語音的文本內(nèi)容。
speechRate：語音播放速率。
lang：語音的語言代碼。
volume：語音的音量。
pitch：語音的音調(diào)。

1、另外，它還接受兩個(gè)回調(diào)函數(shù)作為參數(shù)：endEvent 和 startEvent。endEvent 在語音播放結(jié)束時(shí)觸發(fā)，而 startEvent 在語音播放開始時(shí)觸發(fā)。

2、函數(shù)首先檢查瀏覽器是否支持語音合成服務(wù)，如果不支持則輸出警告信息并返回。然后它檢查是否傳入了要轉(zhuǎn)換的文本內(nèi)容，如果沒有則直接返回。

3、接著，函數(shù)創(chuàng)建了一個(gè) SpeechSynthesisUtterance 對(duì)象，該對(duì)象表示一段要朗讀的文本。

4、然后將傳入的參數(shù)賦值給這個(gè)對(duì)象的相應(yīng)屬性，如文本內(nèi)容、語速、語言、音量和音調(diào)。

在設(shè)置好 SpeechSynthesisUtterance 對(duì)象的屬性后，

5、函數(shù)設(shè)置了兩個(gè)事件處理程序：onstart 和 onend。onstart 事件處理程序在語音播放開始時(shí)觸發(fā) startEvent 回調(diào)函數(shù)，onend 事件處理程序在語音播放結(jié)束時(shí)觸發(fā) endEvent 回調(diào)函數(shù)。

6、最后，函數(shù)通過 speechSynthesis.speak() 方法來開始語音合成，將 SpeechSynthesisUtterance 對(duì)象傳遞給該方法以開始朗讀文本，并返回這個(gè) SpeechSynthesisUtterance 對(duì)象。

4、方法補(bǔ)充

下面小編為大家整理了一些其他js實(shí)現(xiàn)文字轉(zhuǎn)語音的方法，希望對(duì)大家有所幫助

1.還有Web Speech API

Web Speech API 是一個(gè)瀏覽器提供的用于語音識(shí)別和語音合成的API

包括 SpeechSynthesis語音合成和 SpeechRecognition語音識(shí)別

https://developer.mozilla.org/zh-CN/docs/Web/API/SpeechSynthesis

實(shí)現(xiàn)代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>語音合成功能</title>
</head>

<body>
    <h1>語音合成功能</h1>
    <textarea id="textToSpeak" rows="4" cols="50" placeholder="請(qǐng)輸入要朗讀的文本..."></textarea><br>
    <button id="speakButton">朗讀文本</button>

    <script>
        const textArea = document.getElementById("textToSpeak");
        const speakButton = document.getElementById("speakButton");

        // 檢查瀏覽器是否支持語音合成
        if (!window.speechSynthesis) {
            alert("您的瀏覽器不支持語音合成功能。");
        }

        // 獲取語音列表
        const voices = window.speechSynthesis.getVoices();
        // 朗讀文本
        speakButton.addEventListener("click", function () {
            const text = textArea.value.trim();
            if (text === "") {
                alert("請(qǐng)輸入文本內(nèi)容！");
                return;
            }
            console.log("開始朗讀文本：", text);
            const utterance = new SpeechSynthesisUtterance(text);
            utterance.lang = "zh-CN"; // 設(shè)置語言為中文
            utterance.voice = voices.find(voice => voice.lang === "zh-CN"); // 選擇中文語音
            // 設(shè)置語速，取值范圍通常在 0.1 到 10 之間，這里設(shè)置為 0.8 倍速
            utterance.rate = 0.8;
            // 設(shè)置語調(diào)，取值范圍一般在 0 到 2 之間，這里設(shè)為 1.5
            utterance.pitch = 1.5;
            // 設(shè)置音量，取值范圍從 0 到 1，這里設(shè)為 0.5
            utterance.volume = 0.5;
            // 監(jiān)聽朗讀結(jié)束
            utterance.onend = function () {
                console.log("朗讀結(jié)束！");
            };

            // 開始朗讀
            window.speechSynthesis.speak(utterance);
        });
    </script>
</body>

</html>

2.不調(diào)用第三方包

如果不想調(diào)用第三方的語音包，就可以用以下方法實(shí)現(xiàn)，只不過原生API生成語音確實(shí)有點(diǎn)僵硬，isIe的方法是判斷當(dāng)前瀏覽器是否有ActiveXObject 對(duì)象，ActiveXObject 一般情況下是只有IE瀏覽器才有的，如果有就實(shí)例化一個(gè)對(duì)象，調(diào)用Speak方法就可以了；如果沒有就用SpeechSynthesisUtterance這個(gè)HTML5新增的API來操作。

具體代碼如下，在使用的地方直接調(diào)用playVoice()方法就可以了。

function isIe() {
    if (!!window.ActiveXObject || "ActiveXObject " in window) {
        return true
    } else {
        return false
    }
}
 
function playVoice() {
    let msg = '這是一個(gè)文字轉(zhuǎn)語音的demo'
    console.log(isIe())
    if (isIe()) {
        let voiceObj = new ActiveXObject("Sapi.SpVoice")
        voiceObj.Rate = -1
        voiceObj.Volume = 60
        voiceObj.Speak(msg, 1)
    } else {
        let speakMsg = new SpeechSynthesisUtterance(msg)
        speakMsg.rate = 1
        speakMsg.pitch = 1.5
        window.speechSynthesis.speak(speakMsg)
    }
 
}

以上就是原生JavaScript再網(wǎng)頁實(shí)現(xiàn)文本轉(zhuǎn)語音功能的詳細(xì)內(nèi)容，更多關(guān)于JavaScript文本轉(zhuǎn)語音的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: