使用 JavaScript 進行單詞發音 Use JavaScript to Speech Your Text

在w3c草案中增長了對Web Speech Api的支持;主要做用在
兩個很是重要的方面:

• 語音識別 (將所說的轉換成文本文字 / speech to text);

• 語音合成 (將文本文字讀出來 / text to speech);

而chrome在版本33發佈後宣佈對該特性的支持;今天重要介紹第二部分。

演示地址

文檔和演示代碼

開始使用

// 你能夠直接打開你的控制檯粘貼下面代碼
var words = new SpeechSynthesisUtterance('Hello captain');
window.speechSynthesis.speak(words);

固然你還能夠修改不少參數去調整你的發音:

• volume:聲音;

• rate:發音速度;

• pitch:音調;

• voice:聲音;

• language:語言(en,zh,ja...更多參考)

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);

設置發音

你能夠經過下面函數獲取能夠使用的發音列表名稱

speechSynthesis.getVoices().forEach(function(voice) {
  console.log(voice.name, voice.default ? '(default)' :'');
});

大概你能夠獲取下面的一個列表

// 省略一部分結果
Google Deutsch 
Google US English 
Google UK English Female 
Google UK English Male 
Google 日本語 
Google 普通話（中國大陸）  
Google 國語（臺灣）

接下來咱們能夠試驗下改變發音名稱

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);

除了英文，咱們還能夠使用其餘語言

// 使用日語
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不支持)

兼容性檢測

if ('speechSynthesis' in window) {
 // Synthesis support. Make your web apps talk!
}

若是對於不支持的瀏覽器，咱們能夠使用老的方法，即將須要發音的單詞發送到服務端進行處理，返回一個音頻，相似以下:

// 使用來自谷歌翻譯的音頻
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的發音擴展類庫。

持續更新中...

參考

1. Web apps that talk - Introduction to the Speech SynthesisAPI

2. using-google-text-to-speech-in-javascript

3. A More Awesome Web: Features You've Always Wanted - Google I/O 2013

4. HTML Speech API Examples