原生配置语音播报

最新推荐文章于 2024-10-15 14:00:48 发布

桃花树下种桃花

最新推荐文章于 2024-10-15 14:00:48 发布

阅读量133

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/var_let_const/article/details/134787682

版权

文章讲述了作者在开发一个教学项目时，遇到在手机端使用JS语音播报无法在安卓大屏上使用的挑战。作者探索了利用audio标签实现伪语音播报的方法，虽然存在衔接停顿问题，但适用于安卓且能处理动态语音。对于大量动态需求，作者推荐使用百度语音合成作为备选方案。

摘要由CSDN通过智能技术生成

最近接收一个教学项目，需要用户在手机端进行登录，大屏进行播报手机尾号进行叫号。首先编写代码时使用的是windows自带的语音播报JS，它可以将一串动态字符串进行播报，但是有个缺陷就是声音略无感情，只有女声，可以调节语调来更换播报的人声

var synth = window.speechSynthesis;
var message = new SpeechSynthesisUtterance();
function voice_playback(text) {
   message.text = text;
   message.lang = "zh";
   // message.pitch = num;
   message.rate = 1; //语速设置，数字越大越快
   synth.speak(message);
}
voice_playback('你好')

这个可以动态设置需要播报的语音，基本上可以满足项目的需要。但是天有不测风云，万万没有想到大屏的系统是安卓，用上述的方法属实不能用，只能另辟蹊径。

查了查，看到网上有一种新奇的方法，就是利用audio标签来设计一种伪语音，也就是监听audio播报结束时更换audio的播放地址，如此循环来拼接成一段语音播报功能，瑕疵就是两段语音衔接得不太好，有明显的停顿，但是安卓是完全能用的，就是audio的MP3文件需要自己在MP3生成器中先生成好。另外如果动态的语音设置太多，也就是需要生成拼接的文件过多还是老老实实使用百度语音合成吧

<audio src="./mp3/begin.mp3" hidden id="audioPlayer"></audio>



var audioPlayer = document.getElementById('audioPlayer')
audioPlayer.play()
audioPlayer.addEventListener('ended', function () {
    audioPlayer.src = './mp3/0.mp3'
    audioPlayer.play()
})