使用 JavaScript 進行單詞發(fā)音 Use JavaScript to Speech Your

xingqiba 發(fā)布于2019-08-19 18:08 / 2443人閱讀

摘要：在草案中增加了對的支持主要作用在兩個非常重要的方面語音識別將所說的轉換成文本文字語音合成將文本文字讀出來而在版本發(fā)布后宣布對該特性的支持今天重要介紹第二部分。是一款基于的跨平臺的發(fā)音支持類庫，支持超過種語言和種聲音，分為免費版和商業(yè)版。

在w3c草案中增加了對Web Speech Api的支持;主要作用在
兩個非常重要的方面:

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

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

而chrome在版本33發(fā)布后宣布對該特性的支持;今天重要介紹第二部分。

演示地址

文檔和演示代碼

開始使用

// 你可以直接打開你的控制臺粘貼下面代碼
var words = new SpeechSynthesisUtterance("Hello captain");
window.speechSynthesis.speak(words);

當然你還可以修改很多參數(shù)去調整你的發(fā)音:

volume:聲音;

rate:發(fā)音速度;

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

設置發(fā)音

你可以通過下面函數(shù)獲取可以使用的發(fā)音列表名稱

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 國語（臺灣）

接下來我們可以試驗下改變發(fā)音名稱

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!
}

如果對于不支持的瀏覽器，我們可以使用老的方法，即將需要發(fā)音的單詞發(fā)送到服務端進行處理，返回一個音頻，類似如下:

// 使用來自谷歌翻譯的音頻
var audio = new Audio();
audio.src ="http://translate.google.com/translate_tts?ie=utf-8&tl=en&q=" + encodeURI("hello captain");
audio.play();

推薦框架

當然我們如果追求快速開發(fā)的話，我們現(xiàn)在依舊有成熟的框架來支持這個功能，讓他實現(xiàn)更多瀏覽器的支持。

ResponsiveVoice.JS 是一款基于html5的跨平臺的發(fā)音支持類庫，支持超過56種語言和168種
聲音，分為免費版和商業(yè)版。Demo

speak.js 基于eSpeack改造而來的一款js單詞拼讀類庫.

meSpeak.js 是一個100%的客戶端發(fā)音類庫，支持chrome和safari，并且無需要任何html元素；

say.js一款基于node.js的發(fā)音擴展類庫。

持續(xù)更新中...

參考

Web apps that talk - Introduction to the Speech SynthesisAPI

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

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

HTML Speech API Examples

GPU云服務器云服務器使用javascript javascript使用行內使用javascript javascript數(shù)組使用

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79215.html

FCC 成都社區(qū)·前端周刊第 11 期

摘要：正式發(fā)布已正式發(fā)布，新版本重點關注工具鏈以及工具鏈在中的運行速度問題。文章內容包括什么是內存，內存生命周期，中的內存分配，內存釋放，垃圾收集，種常見的內存泄漏以及如何處理內存泄漏的技巧。 1. Angular 6 正式發(fā)布 Angular 6.0.0 已正式發(fā)布，新版本重點關注工具鏈以及工具鏈在 Angular 中的運行速度問題。Angular v6 是統(tǒng)一整體框架、Material ...

lentrue 2019-08-22 17:01 評論0 收藏0
FCC 成都社區(qū)·前端周刊第 11 期

摘要：正式發(fā)布已正式發(fā)布，新版本重點關注工具鏈以及工具鏈在中的運行速度問題。文章內容包括什么是內存，內存生命周期，中的內存分配，內存釋放，垃圾收集，種常見的內存泄漏以及如何處理內存泄漏的技巧。 1. Angular 6 正式發(fā)布 Angular 6.0.0 已正式發(fā)布，新版本重點關注工具鏈以及工具鏈在 Angular 中的運行速度問題。Angular v6 是統(tǒng)一整體框架、Material ...

NusterCache 2019-08-29 15:17 評論0 收藏0
FCC 成都社區(qū)·前端周刊第 11 期

摘要：正式發(fā)布已正式發(fā)布，新版本重點關注工具鏈以及工具鏈在中的運行速度問題。文章內容包括什么是內存，內存生命周期，中的內存分配，內存釋放，垃圾收集，種常見的內存泄漏以及如何處理內存泄漏的技巧。 1. Angular 6 正式發(fā)布 Angular 6.0.0 已正式發(fā)布，新版本重點關注工具鏈以及工具鏈在 Angular 中的運行速度問題。Angular v6 是統(tǒng)一整體框架、Material ...

betacat 2019-08-02 10:21 評論0 收藏0
基于云計算上的人工智能服務

摘要：全球主要的云計算提供商現(xiàn)在提供基于云計算的人工智能產(chǎn)品。顯然，由于從頭開始構建這樣一個系統(tǒng)的費用高昂，人工智能作為一項服務仍然一直位于行業(yè)巨頭所在的領域。在用于人工智能服務的品牌下，公司提供不少于項服務。如今，采用人工智能的企業(yè)遇到了一個主要障礙，那就是在內部開發(fā)人工智能產(chǎn)品成本高昂，因此有了外包人工智能產(chǎn)品的需求。而對于從中小企業(yè)到預算受限的大型企業(yè)來說，通過云計算來采用人工智能的成本要低...

Leo_chen 2019-04-30 14:32 評論0 收藏0