uniapp 语音播报
uniapp 语音播报存在实例没有销毁的漏洞，故采用嵌入 h5 的解决方案。
方案一：以下是 h5 基于百度 tts -实现文字转语音的代码
<!DOCTYPE html>
<html>
<head>
<title>文本转语音测试</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<body>
<div id="app">
<button @click="playAudio()">播报</button>
<audio
style="display: none; width: 100%"
id="tts_autio_id"
autoplay="autoplay"
controls="controls"></audio>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
url: null,
},
methods: {
playAudio() {
this.url =
"http://tts.baidu.com/text2audio?cuid=baike&lan=ZH&ctp=1&pdt=301&per=0&spd=5&pit=5&vol=5&tex=测试&aue=3";
document
.getElementById("tts_autio_id")
.setAttribute("src", this.url);
document.getElementById("tts_autio_id").play();
},
},
});
</script>
</body>
</html>
复制代码方案二：h5 中新增的 api - SpeechSynthesisUtterance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度语音播报</title>
</head>
<body>
<button onclick="speckText(90);">语音播报</button>
<script>
function speckText(str) {
var msg = new SpeechSynthesisUtterance(str);
console.log(window.speechSynthesis.getVoices());
window.speechSynthesis.speak(msg);
}
</script>
</body>
</html>
复制代码拓展
基于百度tts-实现文字转语音，支持下载，在线预览
JS实现文字转语音播放
SpeechSynthesisUtterance 语音合成使用