簡介

HTML5中和Web Speech相關(guān)的API實(shí)際上有兩類，一類是“語音識別(Speech Recognition)”，另外一個(gè)就是“語音合成(Speech Synthesis)”， 這兩個(gè)名詞實(shí)際上指的分別是“語音轉(zhuǎn)文字”，和“文字變語音”。

想要瀏覽器開口說話，只需要：

let speechInstance = new SpeechSynthesisUtterance('大家好，我是渣渣輝。');
speechSynthesis.speak(speechInstance);

就是這么簡單，不妨copy進(jìn)瀏覽器試一下？

SpeechSynthesisUtterance主要用來構(gòu)建語音合成實(shí)例，speechSynthesis大概用來觸發(fā)瀏覽器語音模塊，讓瀏覽器把內(nèi)容讀出來。

SpeechSynthesisUtterance實(shí)例有以下屬性，可以通過設(shè)置一下屬性調(diào)整發(fā)音。

• text – 要合成的文字內(nèi)容，字符串。
• lang – 使用的語言，字符串， 例如："zh-cn"
• voiceURI – 指定希望使用的聲音和服務(wù)，字符串。
• volume – 聲音的音量，區(qū)間范圍是0到1，默認(rèn)是1。
• rate – 語速，數(shù)值，默認(rèn)值是1，范圍是0.1到10，表示語速的倍數(shù)，例如2表示正常語速的兩倍。
• pitch – 表示說話的音高，數(shù)值，范圍從0（最?。┑?（最大）。默認(rèn)值為1。

還有以下方法：

• onstart – 語音合成開始時(shí)候的回調(diào)。
• onpause – 語音合成暫停時(shí)候的回調(diào)。
• onresume – 語音合成重新開始時(shí)候的回調(diào)。
• onend – 語音合成結(jié)束時(shí)候的回調(diào)。

speechSynthesis對象有以下方法：

• speak() – 只能接收SpeechSynthesisUtterance作為唯一的參數(shù)，作用是讀合成的話語。
• stop() – 立即終止合成過程。
• pause() – 暫停合成過程。
• resume() – 重新開始合成過程。
• getVoices() – 此方法不接受任何參數(shù)，用來返回瀏覽器支持的語音包列表，是個(gè)數(shù)組。

speechSynthesis.getVoices()返回因每個(gè)瀏覽器不同及版本的不同返回不太一樣

注意

語言包獲取不穩(wěn)定，有時(shí)候返回為空，可以用定時(shí)器多試幾次。

主要代碼

//vue 部分代碼
methods: {
    onChange (e) {
        let chosenItem = this.voiceData.filter(item => {
            return e == item.lang;
        });
        this.queryParams.voiceURI = chosenItem[0].voiceURI;
    },

    onSpeak () {
        this.speechInstance = new SpeechSynthesisUtterance();
        Object.keys(this.queryParams).forEach(key => {
            this.speechInstance[key] = this.queryParams[key];
        })
        console.log(this.speechInstance);

        speechSynthesis.speak(this.speechInstance);
    }
},

mounted () {
    let timer = setInterval(() => {
        if(!this.voiceData.length) {
            //獲取語言包
            this.voiceData = speechSynthesis.getVoices();
        } else {
            clearInterval(timer);
        }
    }, 500);
}