我本來也想用程式來跑看看，
但是發現好像前陣子Google已經更改過API，
要使用它好像沒有那麼容易了，
後來在網路上看到有ResponsiveVoice.JS這玩意兒，
就來試試看它了，
只是這個沒有翻譯的功能，
純粹只是能把你打文字轉成聲音而已。
使用方式
因為是JS，所以不用下載什麼東西，當然你也可以把官方提供的JS檔給下載下來，放在自己的頁面裡面。官方網站提供的JS檔
<script src="http://code.responsivevoice.org/responsivevoice.js"></script>
官方網站提供的API
//沒有設定語言就是使用預設的
responsiveVoice.speak("hello world");
//設定語言的方式
responsiveVoice.speak("hello world", "UK English Male");
//pitch:好像是音準? 不清楚XD
responsiveVoice.speak("hello world", "UK English Male", {pitch: 2});
//rate:說話的速度
responsiveVoice.speak("hello world", "UK English Male", {rate: 1.5});
//volume:聲音大小
responsiveVoice.speak("hello world", "UK English Male", {volume: 1});
//onstart:開始說話時。 onend:結束說話時。
responsiveVoice.speak("hello world", "UK English Male", {onstart: StartCallback, onend: EndCallback});
//檢查瀏覽器是否支持本地TTS
if(responsiveVoice.voiceSupport()) {
responsiveVoice.speak("hello world");
}
//提供可用的語音
var voicelist = responsiveVoice.getVoices();
//設定預設的聲音
responsiveVoice.setDefaultVoice("US English Female");
//檢查是否正在說話中
if(responsiveVoice.isPlaying()) {
console.log("I hope you are listening");
}
//暫停
responsiveVoice.pause();
//重新開始
responsiveVoice.resume();
實作一個範例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ResponsiveVoice</title>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://code.responsivevoice.org/responsivevoice.js"></script>
<script>
$(document).ready(function () {
var IsEnd = true;;
var voicelist = responsiveVoice.getVoices();
$('#btnSubmit').on('click', function () {
if (!IsEnd)
responsiveVoice.fallbackMode = false;
IsEnd = false;
responsiveVoice.speak($('#txtText').val(), $('#VoiceSelection').val(), {
onend: function (EndCallback) {
IsEnd = true;
}
});
});
});
</script>
</head>
<body>
<div>
<div>
<select id="VoiceSelection" class="input input--dropdown js--animations">
<option value="">--Select--</option>
<option value="UK English Female">UK English Female</option>
<option value="UK English Male">UK English Male</option>
<option value="US English Female">US English Female</option>
<option value="Arabic Male">Arabic Male</option>
<option value="Arabic Female">Arabic Female</option>
<option value="Armenian Male">Armenian Male</option>
<option value="Australian Female">Australian Female</option>
<option value="Brazilian Portuguese Female">Brazilian Portuguese Female</option>
<option value="Chinese Female">Chinese Female</option>
<option value="Chinese (Hong Kong) Female">Chinese (Hong Kong) Female</option>
<option value="Chinese Taiwan Female">Chinese Taiwan Female</option>
<option value="Czech Female">Czech Female</option>
<option value="Danish Female">Danish Female</option>
<option value="Deutsch Female">Deutsch Female</option>
<option value="Dutch Female">Dutch Female</option>
<option value="Finnish Female">Finnish Female</option>
<option value="French Female">French Female</option>
<option value="Greek Female">Greek Female</option>
<option value="Hatian Creole Female">Hatian Creole Female</option>
<option value="Hindi Female">Hindi Female</option>
<option value="Hungarian Female">Hungarian Female</option>
<option value="Indonesian Female">Indonesian Female</option>
<option value="Italian Female">Italian Female</option>
<option value="Japanese Female">Japanese Female</option>
<option value="Korean Female">Korean Female</option>
<option value="Latin Female">Latin Female</option>
<option value="Norwegian Female">Norwegian Female</option>
<option value="Polish Female">Polish Female</option>
<option value="Portuguese Female">Portuguese Female</option>
<option value="Romanian Male">Romanian Male</option>
<option value="Russian Female">Russian Female</option>
<option value="Slovak Female">Slovak Female</option>
<option value="Spanish Female">Spanish Female</option>
<option value="Spanish Latin American Female">Spanish Latin American Female</option>
<option value="Swedish Female">Swedish Female</option>
<option value="Tamil Male">Tamil Male</option>
<option value="Thai Female">Thai Female</option>
<option value="Turkish Female">Turkish Female</option>
<option value="Afrikaans Male">Afrikaans Male</option>
<option value="Albanian Male">Albanian Male</option>
<option value="Bosnian Male">Bosnian Male</option>
<option value="Catalan Male">Catalan Male</option>
<option value="Croatian Male">Croatian Male</option>
<option value="Czech Male">Czech Male</option>
<option value="Danish Male">Danish Male</option>
<option value="Esperanto Male">Esperanto Male</option>
<option value="Finnish Male">Finnish Male</option>
<option value="Greek Male">Greek Male</option>
<option value="Hungarian Male">Hungarian Male</option>
<option value="Icelandic Male">Icelandic Male</option>
<option value="Latin Male">Latin Male</option>
<option value="Latvian Male">Latvian Male</option>
<option value="Macedonian Male">Macedonian Male</option>
<option value="Moldavian Male">Moldavian Male</option>
<option value="Montenegrin Male">Montenegrin Male</option>
<option value="Norwegian Male">Norwegian Male</option>
<option value="Serbian Male">Serbian Male</option>
<option value="Serbo-Croatian Male">Serbo-Croatian Male</option>
<option value="Slovak Male">Slovak Male</option>
<option value="Swahili Male">Swahili Male</option>
<option value="Swedish Male">Swedish Male</option>
<option value="Vietnamese Male">Vietnamese Male</option>
<option value="Welsh Male">Welsh Male</option>
<option value="US English Male">US English Male</option>
<option value="Fallback UK Female">Fallback UK Female</option>
</select>
</div>
<div>
<textarea id="txtText" cols="45" rows="3">Test. I have a Pen.</textarea>
</div>
<div>
<input id="btnSubmit" type="submit" value="Submit" />
</div>
</div>
</body>
</html>
這個套件不用使用到JQuery，
我是因為這樣感覺大家看了會比較熟悉(?)才加入的，
需要注意的地方就是，
因為我的下拉選單是從官方網站那邊拿過來用的，
所以有些國家的語音好像沒有開放(沒開放為什麼也要放在上面給大家測?)，
如果選擇了之後，接下來選其他的都不會再出現聲音，
這個問題我是先在我本機測才發現這問題，
後來發現官方網站也有這問題(不知道是不是只有我的電腦會這樣)，
所以後來就加上了一個判斷，
判斷上次的語音是否有結束，
沒有結束就把fallbackMode設定為false(這個是我翻它的原始碼找到的)，
設為false會重新建一個語音物件，就不會卡在上一個出現問題的地方。
我是因為這樣感覺大家看了會比較熟悉(?)才加入的，
需要注意的地方就是，
因為我的下拉選單是從官方網站那邊拿過來用的，
所以有些國家的語音好像沒有開放(沒開放為什麼也要放在上面給大家測?)，
如果選擇了之後，接下來選其他的都不會再出現聲音，
這個問題我是先在我本機測才發現這問題，
後來發現官方網站也有這問題(不知道是不是只有我的電腦會這樣)，
所以後來就加上了一個判斷，
判斷上次的語音是否有結束，
沒有結束就把fallbackMode設定為false(這個是我翻它的原始碼找到的)，
設為false會重新建一個語音物件，就不會卡在上一個出現問題的地方。
原本的錯誤訊息
最後醜醜的成品
參考連結
官方網站連結：http://responsivevoice.org/
沒有留言:
張貼留言