vue提示音_vue中使用audio标签进行消息提示

本文实现的功能是：有新的消息更新时，页面会播放提示音，提示的声音会播放15秒，然后停止播放，如果在停止播放之前又有新的消息进来，则会重新计时15秒。

首先，添加audio标签，引入资源文件。

在audio标签中存在如下属性：

autoplay：是否音频在就绪后马上播放。

controls：是否向用户显示控件，比如播放按钮。

loop：是否音频结束时重新开始播放。

preload：是否音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

src：要播放的音频的 URL。

HTML5 audio支持的音频格式有wav，mp3和ogg格式。

ogg：一种新的音频压缩格式，是完全免费、开放和没有专利限制的。

mp3：是一种音频压缩技术。它被设计用来大幅度地降低音频数据量。

wav：为微软公司开发的一种声音文件格式，声音文件质量和CD相差无几。

标签是的一个子标签，作用就是用来引入多个音频，浏览器会选择一个支持的音频格式进行加载，对于不支持标签的浏览器，元素也可以作为浏览器不识别的内容加入到文档中。当有多个标签时，默认播放第一个标签。

标签添加完毕以后，就是编写触发事件了。如今如Chrome之类的浏览器，默认情况下，声音自动播放内容会阻止。经过测试，静音的自动播放内容仍会自动播放。使用声音自动播放内容，无论是否具有可见的控件，以及是否设置为循环播放，