最近在做一个报警系统,应NOC团队需求报警时最好直接语音提醒。事不宜迟,搜索解决方案,发现在前端无论是播放音乐还是播放指定文本的语音,都特别简单。
1.播放音乐
直接上代码:
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', "/sound/双截棍 - 周杰伦.mp3");
audioElement.play();
是的,只要你正确的在根目录文件夹下放置了正确的文件,执行这段js就能播放歌曲了!
2.播放语音
简单搜索了下,发现这家responsivevoice的解决方案非常便利。
当然,测试环境开发时可以使用免费的commercial版本,正式商业版本时请购买licence。
集成步骤:第一步:
在前端项目中添加相关js。一般是在index.html
中加入如下:
<script src="http://code.responsivevoice.org/responsivevoice.js"></script>
第二步:在需要播放语音的地方执行以下代码即可:
responsiveVoice.speak("这是一个很好的技术博客", "Chinese Female");
具体播放执行是还可以微调一些参数,具体可见api
发音的文本会自动全部转换成所选择的语言(也就是第二个参数),但是如“hello你好”这样的文字会被发音成类似”赫洛你好”,也就是没有中英文自动识别功能,请注意。
默认语言是“UK English Male”,还可以选择粤语(“Chinese (Hong Kong) Female”)、日语(“Japanese Female”)、韩语(“Korean Female”)、阿拉伯语等等。
最后,把音乐和语言都加上去
只听发生异常时,伴随着“快使用双截棍,喝喝哈嘿”的音乐声中(应NOC团队的需求),响起“核心订单系统触发报警”的声音,我们的报警系统在闪个不停。。。