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

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

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

<audio id="audio" preload="auto" loop>
  <source src="../assets/alarm.ogg" type="audio/ogg" />
</audio>

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

• autoplay：是否音频在就绪后马上播放。
• controls：是否向用户显示控件，比如播放按钮。
• loop：是否音频结束时重新开始播放。
• preload：是否音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
• src：要播放的音频的 URL。

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

• ogg：一种新的音频压缩格式，是完全免费、开放和没有专利限制的。
• mp3：是一种音频压缩技术。它被设计用来大幅度地降低音频数据量。
• wav：为微软公司开发的一种声音文件格式，声音文件质量和CD相差无几。

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

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

play () {
      this.lastRunTime = Date.now()
      let audio = document.querySelector('#audio')
      if (!this.isPlaying) {
        audio.play()
        this.isPlaying = true
      }
      let timeOut = setTimeout(() => {
        this.stop(timeOut)
      }, 15000)
    },
stop (timeOut) {
      this.currentTime = Date.now()
      let audio = document.querySelector('#audio')
      if (this.currentTime - this.lastRunTime < 15000) {
      } else {
        if (this.isPlaying) {
          audio.currentTime = 0
          audio.pause()
          this.isPlaying = false
        }
      }
      clearTimeout(timeOut)
    }

<audio>标签中的控制函数说明：

• load()：加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载
• play()：加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放
• pause()：暂停处于播放状态的音频、视频文件

此处的lastRunTime用于记录最后一次触发play()方法的时间；document.querySelector('#audio')用于返回匹配指定选择器的第一个元素；isPlaying用于判断此时音频是否在播放；setTimeout()方法用于在指定毫秒数后再调用函数或者计算表达式（以毫秒为单位），返回值为该定时器的标识，此处设置15秒以后执行stop(timeOut)方法；currentTime用于记录执行stop()方法的时间，如果this.currentTime - this.lastRunTime < 15000则表明，在播放音频期间有新的消息进入，所以此时不应该停止播放，否则的话就使用audio.currentTime = 0通过赋值0使得当前播放位置清零；无论此时是否要停止播放，我们都要清除定时器，防止内存溢出clearTimeout(timeOut)。