幽灵资源网 Design By www.bzswh.com
一、在网页上实现文字转换成语音
方式一:
摘要:语音合成:也被称为文本转换技术(TTS),它是将计算机自己产生的、或外部输入的文字信息转变为可以听得懂的、流利的口语输出的技术。
1、 使用百度的接口:
http://tts.baidu.com/text2audio"htmlcode">
<!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="/UploadFiles/2021-04-02/text2audio">方式二:
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="/UploadFiles/2021-04-02/laba.png">在这里插入代码片 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); }, }点击小喇叭即可播放
总结
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...