簡介
HTML5中和Web Speech相關(guān)的API實際上有兩類甥郑，一類是“語音識別(Speech Recognition)”瀑罗，另外一個就是“語音合成(Speech Synthesis)”， 這兩個名詞實際上指的分別是“語音轉(zhuǎn)文字”蜀变，和“文字變語音”。
想要瀏覽器開口說話，只需要：
let speechInstance = new SpeechSynthesisUtterance('大家好嗦明，我是渣渣輝。');
speechSynthesis.speak(speechInstance);
就是這么簡單蚪燕，不妨copy進瀏覽器試一下娶牌？
SpeechSynthesisUtterance主要用來構(gòu)建語音合成實例，speechSynthesis大概用來觸發(fā)瀏覽器語音模塊馆纳，讓瀏覽器把內(nèi)容讀出來诗良。
SpeechSynthesisUtterance實例有以下屬性，可以通過設(shè)置一下屬性調(diào)整發(fā)音鲁驶。
- text – 要合成的文字內(nèi)容鉴裹，字符串。
- lang – 使用的語言灵嫌，字符串壹罚， 例如："zh-cn"
- voiceURI – 指定希望使用的聲音和服務(wù)，字符串寿羞。
- volume – 聲音的音量猖凛，區(qū)間范圍是0到1，默認是1绪穆。
- rate – 語速辨泳，數(shù)值，默認值是1玖院，范圍是0.1到10菠红，表示語速的倍數(shù)，例如2表示正常語速的兩倍难菌。
- pitch – 表示說話的音高试溯，數(shù)值，范圍從0（最薪季啤）到2（最大）遇绞。默認值為1。
還有以下方法：
- onstart – 語音合成開始時候的回調(diào)燎窘。
- onpause – 語音合成暫停時候的回調(diào)摹闽。
- onresume – 語音合成重新開始時候的回調(diào)。
- onend – 語音合成結(jié)束時候的回調(diào)褐健。
speechSynthesis對象有以下方法：
- speak() – 只能接收SpeechSynthesisUtterance作為唯一的參數(shù)付鹿，作用是讀合成的話語。
- stop() – 立即終止合成過程。
- pause() – 暫停合成過程舵匾。
- resume() – 重新開始合成過程俊抵。
- getVoices() – 此方法不接受任何參數(shù)，用來返回瀏覽器支持的語音包列表纽匙，是個數(shù)組务蝠。
speechSynthesis.getVoices()返回因每個瀏覽器不同及版本的不同返回不太一樣
注意
語言包獲取不穩(wěn)定，有時候返回為空烛缔，可以用定時器多試幾次馏段。
主要代碼
//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);
}
