您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了如何在vue項目或網頁上實現文字轉換成語音播放功能,內容簡而易懂,希望大家可以學習一下,學習完之后肯定會有收獲的,下面讓小編帶大家一起來看看吧。
一、在網頁上實現文字轉換成語音
方式一:
摘要:語音合成:也被稱為文本轉換技術(TTS),它是將計算機自己產生的、或外部輸入的文字信息轉變為可以聽得懂的、流利的口語輸出的技術。
1、 使用百度的接口:
http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=你要轉換的文字
2、參數說明:
lan=zh:語言是中文,如果改為lan=en,則語言是英文。
ie=UTF-8:文字格式。
spd=2:語速,可以是1-9的數字,數字越大,語速越快。
text=**:這個就是你要轉換的文字。
3、代碼示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>語音測試</title> </head> <body> <div> <input type="text" id="ttsText"> <input type="button" id="tts_btn" onclick="doTTS()" value="播放"> </div> <div id="bdtts_div_id"> <audio id="tts_autio_id" autoplay="autoplay"> <source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=9&text=播報內容" type="audio/mpeg"> <embed id="tts_embed_id" height="0" width="0" src=""> </audio> </div> </body> <script type="text/javascript"> function doTTS(){ var ttsDiv = document.getElementById('bdtts_div_id'); var ttsAudio = document.getElementById('tts_autio_id'); var ttsText = document.getElementById('ttsText').value; ttsDiv.removeChild(ttsAudio); var au1 = '<audio id="tts_autio_id" autoplay="autoplay">'; var sss = '<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=Zh&ie=UTF-8&spd=4&text='+ttsText+'" type="audio/mpeg">'; var eee = '<embed id="tts_embed_id" height="0" width="0" src="">'; var au2 = '</audio>'; ttsDiv.innerHTML = au1 + sss + eee + au2; ttsAudio = document.getElementById('tts_autio_id'); ttsAudio.play(); } </script> </html>
方式二:
1、調動方法:參數為指定文字
2、這里主要用的是SpeechSynthesisUtterance的方法
3、代碼示例:
在這里插入代碼片 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <button id="abc">點擊</button> </body> </html> <script type="text/javascript"> // window.οnlοad=function(){ // const synth = window.speechSynthesis // let msg = new SpeechSynthesisUtterance("你好"); // console.log(msg) // //msg.rate = 4 播放語速 // //msg.pitch = 10 音調高低 // //msg.text = "播放文本" // //msg.volume = 0.5 播放音量 // synth.speak(msg); // } const synth = window.speechSynthesis const msg = new SpeechSynthesisUtterance() msg.text = 'hello world' msg.lang = 'zh-CN' function handleSpeak(e) { synth.speak(msg) } function throttle(fn,delay) { let last = 0 return function() { const now = new Date() if(now - last > delay) { fn.apply(this,arguments) last = now } } } console.log(msg); document.getElementById('abc').onclick=throttle(handleSpeak,1000); </script>
二、在vue項目中實現文字轉換為語音播放
1、調用方法:參數為指定的文字
2、主要使用的也是是SpeechSynthesisUtterance的方法(其他方法也可以,如使用百度的接口)
3、代碼示例:
在這里插入代碼片 <img v-on:click="read(word.word)" src="../../assets/laba.png" alt="小喇叭" width="20px" height="20px" />
在這里插入代碼片 methods: { read: function(word) { const synth = window.speechSynthesis; const msg = new SpeechSynthesisUtterance(); msg.text = word; msg.lang = "zh-CN"; function handleSpeak(e) { synth.speak(msg); } function throttle(fn, delay) { let last = 0; return function() { const now = new Date(); if (now - last > delay) { fn.apply(this, arguments); last = now; } }; } console.log(msg); throttle(handleSpeak(), 1000); }, }
點擊小喇叭即可播放
以上就是關于如何在vue項目或網頁上實現文字轉換成語音播放功能的內容,如果你們有學習到知識或者技能,可以把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。