**
在vue项目或网页上简单实现文字转换成语音播放
**
一、在网页上实现文字转换成语音
方式一：
摘要：语音合成：也被称为文本转换技术（TTS），它是将计算机自己产生的、或外部输入的文字信息转变为可以听得懂的、流利的口语输出的技术。
1、 使用百度的接口：
/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" "/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="/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="/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.speechSynthesisconst msg = new SpeechSynthesisUtterance()msg.text = 'hello world'msg.lang = 'zh-CN'function handleSpeak(e) {synth.speak(msg)}function throttle(fn,delay) {let last = 0return 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、代码示例：
在这里插入代码片<imgv-on:click="read(word.word)"src="../../assets/laba.png"alt="小喇叭"width="20px"height="20px"style="float: right;margin-top: 7px"/>
在这里插入代码片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);},}
点击小喇叭即可播放
