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)。