vue项目或网页上实现文字转换成语音播放功能
2020-06-20 11:48
2331 查看
一、在网页上实现文字转换成语音
方式一:
摘要:语音合成:也被称为文本转换技术(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" 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); }, }
点击小喇叭即可播放
总结
到此这篇关于在vue项目或网页上实现文字转换成语音的文章就介绍到这了,更多相关在vue项目或网页上实现文字转换成语音内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
相关文章推荐
- Vue项目中使用better-scroll实现一个轮播图自动播放功能
- 实现文字翻译功能,文字转语音播报功能(项目开发中)
- Vue项目使用clipboard.js实现文字复制,剪切功能
- 模仿微信语音聊天功能(4) 音频播放实现以及项目结束
- 使用jacob+SAPI5.1实现将将文字转换为语音播放并可存储到.wav文件
- 快速的将文字转换成语音,具体功能如何实现
- 如何在网页中实现音乐播放功能
- 【转载】Flex调用外部JS实现播放语音文件功能
- WIN 2003下实现网页播放FLV的功能
- MFC中 使用多线程实现语音播放功能
- vue项目中实现扫码功能
- vue 上实现无缝滚动播放文字系统公告
- 趣味开发 - 利用百度翻译实现文字转语音功能
- JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
- vue项目如何实现剪切板功能--vue-clipboard2
- vue项目利用vue-video-player实现视频兼容IOS和安卓放大播放
- vue项目中使用screenfull.js实现全屏,缩放功能
- 更新pip3与pyttsx3文字语音转换的实现方法
- 微信小程序聊天功能 WebSocket 实现发送文字,图片,语音以及WebSocket 常见问题解决方案
- 本图片处理类功能非常之强大可以实现几乎所有WEB开发中对图像的处理功能都集成了,包括有缩放图像、切割图像、图像类型转换、彩色转黑白、文字水印、图片水印等功能