如何在vue项目或网页上实现文字转换成语音播放功能

2024-12-22 技术教程

这篇文章主要为大家展示了如何在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.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、代码示例：

在这里插入代码片 <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项目或网页上实现文字转换成语音播放功能的内容，如果你们有学习到知识或者技能，可以把它分享出去让更多的人看到。