## 一、調用百度的播報功能 ~~~ function speakText(text){ var url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text="+encodeURI(text); var audio = new Audio(url); audio.src = url; audio.play(); } speakText('hello world ~'); ~~~ #### 1、逐條播放示例： ~~~ var audio = new Audio(), ttsArr = ['你好，我是一個中國人！', 'hello world'], ttsEnd = false; function tts(text) { if(text) { ttsEnd = true; var url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text="+encodeURI(text); // audio.muted = true; audio.src = url; setTimeout(function() { // audio.removeAttribute('muted'); audio.play(); audio.onended = function() { if(ttsArr.length) { tts(ttsArr.shift()); } ttsEnd = false; } }); } } tts(ttsArr.shift()); setTimeout(function() { ttsArr.push('哈哈哈'); if(!ttsEnd) { tts(ttsArr.shift()); } }, 1000); setTimeout(function() { ttsArr.push('呵呵'); if(!ttsEnd) { tts(ttsArr.shift()); } }, 1500); setTimeout(function() { ttsArr.push('孫悟空', '豬八戒'); if(!ttsEnd) { tts(ttsArr.shift()); } }, 1000); ~~~ #### 2、預警鈴聲 ~~~ // tts var audio = new Audio('./video/music-warning.mp3'), ttsLoop = 0, // 循環次數 ttsEnd = false; // 是否播放結束 function tts() { ttsEnd = true; audio.play(); audio.onended = function() { if(ttsLoop) { tts(); ttsLoop--; } ttsEnd = false; } } // 語音告警 $.checkboxFn({ele: '.js-voice-warning'}, function() { var active = $(this).hasClass('active'); if(active) { // 開啟 ttsLoop++; audio.play(); } else { // 關閉 audio.pause(); } }); // 初始化判斷 if($('.js-voice-warning').hasClass('active')) { tts(); // 播放 } ~~~ 如果初次加載音頻播放報錯，可以在客戶端chrome瀏覽器修改自動播放策略，地址：[chrome://flags/#autoplay-policy](chrome://flags/#autoplay-policy)  ## 二、ResponsiveVoice.JS API地址：https://responsivevoice.org/ ~~~ responsiveVoice.speak("hello world", "Chinese Female", {volume: 1}); ~~~ > 功能比較齊全，不過目前只在firefox瀏覽器可以使用 ## 三、jQuery.speech 示例下載地址：https://github.com/wenco/speech ~~~ <div id="Result">hello world ~</div> <script src="js/jQuery/jQuery-2.1.4.min.js"></script> <script src="js/speech/jQuery.speech.min.js"></script> <script> $('#Result').speech({ "speech": true, "speed": 1, "bg": "./images/speech.png" }); </script> ~~~