Posted on 2017-04-25 18:48
ZhouFeng 閱讀(3341)
評論(0) 編輯 收藏 所屬分類:
原創 、
Web開發
因為需要實現在頁面中進行語音提示，有點像美團那個外賣的提示音“您有新的訂單，請注意查收”，于是開始搜尋方法，最后發現一個開源項目，https://github.com/wenco/speech 用來實現語音播報，上面有文檔說明。先clone下來試試
按照所給的代碼，運行起來沒有問題，需要在頁面中放入一個標簽，并寫入要轉換為語音的內容。為了后面為了調用方便，下面進行了一些調整。
把播放按鈕隱藏起來，讓事件觸發播放。
修改jQuery.speech.min.js，因頁面引用的文件是這個，也可以單獨創建一個js在頁面中引入，寫入以下內容
//語音內容放在頁面元素中，如果沒有則創建<div style="display: none" id="tts_content"></div>
function say(arg) {
//處理頁面元素
if($("#tts_content").length == 0){
//存在元素
$("<div style='display: none' id='tts_content'></div>").appendTo("body");
}
//處理傳入參數
if(arg){
$('#tts_content').text(arg);
}
else{
$('#tts_content').text("您有新的消息，請注意查收");
}
//轉化為語音
$('#tts_content').speech({
"speech":
false,
"speed": 16
});
}
調整了播報速度，在程序中自動創建需要的標簽，需要播報的內容根據參數傳入，沒有參數也可以播報默認的消息，經過這樣簡單的封裝后，在調用時，就只需要調用say()方法即可，不需要在頁面中放入標簽，也方便放入其他事件中，然后頁面就可以這樣了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>語音播報</title>
</head>
<body>
<style type="text/css">
body{background-color:#fff;padding-top:50px;}
</style>
<script src="js/jQuery/jQuery-2.1.4.min.js"></script>
<script src="js/speech/jQuery.speech.min.js"></script>
<button id="kk">說一個</button>
<script>
$("#kk").click(function() {
say("您有新的訂單，請注意查收");
//say();
});
</script>
</body>
</html>
添加按鈕只是為了演示事件觸發，需要說什么內容就傳入什么參數，如果不傳入參數，則播報默認內容。這樣的調用，甚是簡單，終于完成了這樣的功能，很帥，哈哈:D
致謝https://github.com/wenco/speech