在w3c草案中增加了對Web Speech Api的支援;主要作用在
兩個非常重要的方面:
而chrome在版本33釋出後宣佈對該特性的支援;今天重要介紹第二部分。
開始使用
|
1 2 3 |
// 你可以直接開啟你的控制檯貼上下面程式碼 var words = new SpeechSynthesisUtterance('Hello captain'); window.speechSynthesis.speak(words); |
當然你還可以修改很多引數去調整你的發音:
volume:聲音;rate:發音速度;pitch:音調;voice:聲音;language:語言(en,zh,ja…更多參考)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var msg = new SpeechSynthesisUtterance(); var voices = window.speechSynthesis.getVoices(); msg.voice = voices[10]; // msg.voiceURI = 'native'; msg.volume = 1; // 0 to 1 msg.rate = 1; // 0.1 to 10 msg.pitch = 2; //0 to 2 msg.text = 'I am Stark'; msg.lang = 'en'; msg.onend = function(e) { console.log('Finished in ' + event.elapsedTime + ' seconds.'); }; speechSynthesis.speak(msg); |
設定發音
你可以通過下面函式獲取可以使用的發音列表名稱
|
1 2 3 |
speechSynthesis.getVoices().forEach(function(voice) { console.log(voice.name, voice.default ? '(default)' :''); }); |
大概你可以獲取下面的一個列表
|
1 2 3 4 5 6 7 8 |
// 省略一部分結果 Google Deutsch Google US English Google UK English Female Google UK English Male Google 日本語 Google 普通話（中國大陸） Google 國語（臺灣） |
接下來我們可以試驗下改變發音名稱
|
1 2 3 |
var msg = new SpeechSynthesisUtterance('hey captain,sometime I just want to break you perfect teeth'); msg.voice = speechSynthesis.getVoices().filter(function(voice) { return voice.name == 'Google US English'; })[0]; speechSynthesis.speak(msg); |
除了英文，我們還可以使用其他語言
|
1 2 3 4 5 6 7 8 |
// 使用日語 var msg = new SpeechSynthesisUtterance('おはようございます'); msg.voice = speechSynthesis.getVoices().filter(function(voice) { return voice.name == 'Google 日本語'; })[0]; speechSynthesis.speak(msg); // or 使用中文 var msg = new SpeechSynthesisUtterance('美國隊長3'); msg.voice = speechSynthesis.getVoices().filter(function(voice) { return voice.name == 'Google 普通話（中國大陸）'; })[0]; speechSynthesis.speak(msg); |
瀏覽器支援
- Chrome 33+
- iOS7 safari部分支援 (測試iOS8支援,iOS9不支援)
相容性檢測
|
1 2 3 |
if ('speechSynthesis' in window) { // Synthesis support. Make your web apps talk! } |
如果對於不支援的瀏覽器，我們可以使用老的方法，即將需要發音的單詞傳送到服務端進行處理，返回一個音訊，類似如下:
|
1 2 3 4 |
// 使用來自谷歌翻譯的音訊 var audio = new Audio(); audio.src ='http://translate.google.com/translate_tts?ie=utf-8&tl=en&q=' + encodeURI('hello captain'); audio.play(); |
推薦框架
當然我們如果追求快速開發的話，我們現在依舊有成熟的框架來支援這個功能，讓他實現更多瀏覽器的支援。
- ResponsiveVoice.JS 是一款基於html5的跨平臺的發音支援類庫，支援超過56種語言和168種
聲音，分為免費版和商業版。Demo - speak.js 基於eSpeack改造而來的一款js單詞拼讀類庫.
- meSpeak.js 是一個100%的客戶端發音類庫，支援chrome和safari，並且無需要任何html元素；
- say.js一款基於node.js的發音擴充套件類庫。
持續更新中…