网页中的语音提示——您有新的消息

去一些店里吃饭，经常能听到消息“您有新的美团外卖订单”，但是也没有仔细思考过里面的实现方式。

刚好遇上了一个类似的需求，一个包含消息会话列表的系统，需要在有新消息会话到来的时候，语言提示“您有新的消息，请注意查收”。

语音提示如何播放

这些提示的语音一般是人为录制的音频文件，对用户来说体验会比较好，如果用电子音，语句一长，听着就很别扭了。
所以就要先看如何在浏览器中播放一个音频文件。

先加上audio DOM元素，把下面的代码写入到对应的HTML中：

<audio #audio src="/assets/audio/new-message.mp3"> </audio>

你会发现在上面的HTML代码中没有写controls="controls",是因为不想把音频文件暴露给用户知道。

然后再去调用元素的play方法去播放语音，这里使用的是angular的框架所以代码如下：

...
@ViewChild('audio') newMessageAudio: ElementRef;
...
ngOnInit(){
//监听流的内容，在合适的时机播放语音
  this.messageService.messages$.pipe(
    takeUntil(this.complete$),
    distinctUntilChanged((pre,next)=>{
      return false; //此处写上没有新消息的判断，表示当没有新消息到来的时候，就不会触发下面的播放操作
      //在这里返回false代表着永远都有新消息。
    }),
    filter(message=>messages.length > 0)//这里加上非空的判断，如果没有消息时，不应该播放语音
  ).subscribe(()=>{
    this.newMessageAudio.nativeElement.play();
  });
}

浏览器兼容

要求是兼容主流浏览器及其常用的版本，例如IE、EDGE、Firefox、chrome等等。
那么先看我们使用的HTML tag <audio>的兼容性，通过查询知道这个标签能够满足我们的要求。

image.png

其次再来看声音文件的兼容性，会发现wav文件是不能在IE上播放的，所以选择了兼容性更好的MP3文件。

image.png image.png

具体的兼容性可以在https://caniuse.com/#search=wav查询

音频文件处理

常常录制音频没有很好的环境，但是对于音频的质量要求又不低，所以最好简单的给音频文件做一些处理。
例如
去燥，这个imovie和很多声音处理软件都可以做到。
压缩，直接找在线的音频压缩网站压缩一下，为了网页的性能更高一些。
换格式，上面的兼容性要求我们用MP3格式的文件，但是手机录制的文件往往不是MP3，这个也可以找一些在线转换格式的网站来转一下。

然后，就没有然后了，一个语音提示就做好了。欢迎查漏补缺~