我們需要用一個按鈕去控制音頻的播放與暫停，這里調用了audio的兩個api,以及兩個事件

audio.play()

audio.pause()

play事件

pause事件

修改src/components/VueAudio.vue

// filename: src/components/VueAudio.vue

圖3 音頻播放與暫停

音頻的時間顯示主要有兩部分，音頻的總時長和當前播放時間?？梢詮膬蓚€事件中獲取

loadedmetadata:代表音頻的元數據已經被加載完成，可以從中獲取音頻總時長

timeupdate: 當前播放位置作為正常播放的一部分而改變，或者以特別有趣的方式，例如不連續地改變，可以從該事件中獲取音頻的當前播放時間，該事件在播放過程中會不斷被觸發

要點代碼：整數格式化成時:分:秒

function realFormatSecond(second) {
  var secondType = typeof second

  if (secondType === "number" || secondType === "string") {
    second = parseInt(second)

    var hours = Math.floor(second / 3600)
    second = second - hours * 3600
    var mimute = Math.floor(second / 60)
    second = second - mimute * 60

    return hours + ":" + ("0" + mimute).slice(-2) + ":" + ("0" + second).slice(-2)
  } else {
    return "0:00:00"
  }
}

要點代碼： 兩個事件的處理

// 當timeupdate事件大概每秒一次，用來更新音頻流的當前播放時間
onTimeupdate(res) {
      console.log("timeupdate")
      console.log(res)
      this.audio.currentTime = res.target.currentTime
    },
// 當加載語音流元數據完成后，會觸發該事件的回調函數
// 語音元數據主要是語音的長度之類的數據
onLoadedmetadata(res) {
  console.log("loadedmetadata")
  console.log(res)
  this.audio.maxTime = parseInt(res.target.duration)
}

完整代碼

打開瀏覽器可以看到，當音頻播放時，當前時間也在改變。
圖4

進度條主要有兩個控制，改變進度的原理是：改變audio.currentTime屬性值

音頻播放后，當前時間改變，進度條就要隨之改變

拖動進度條，可以改變音頻的當前時間

// 進度條ui


// 拖動進度條，改變當前時間，index是進度條改變時的回調函數的參數0-100之間，需要換算成實際時間
changeCurrentTime(index) {
  this.$refs.audio.currentTime = parseInt(index / 100 * this.audio.maxTime)
},
// 當音頻當前時間改變后，進度條也要改變
onTimeupdate(res) {
  console.log("timeupdate")
  console.log(res)
  this.audio.currentTime = res.target.currentTime
  this.sliderTime = parseInt(this.audio.currentTime / this.audio.maxTime * 100)
},

// 進度條格式化toolTip
formatProcessToolTip(index = 0) {
  index = parseInt(this.audio.maxTime / 100 * index)
  return "進度條: " + realFormatSecond(index)
},

音頻的音量控制和進度控制差不多，也是通過拖動滑動條，去修改aduio.volume屬性值，此處不再啰嗦

音頻的音量控制和進度控制差不多，也是點擊按鈕，去修改aduio.playbackRate屬性值，該屬性代表音量的大小，取值范圍是0 - 1，用滑動條的時候，也是需要換算一下值，此處不再啰嗦

靜音的控制是點擊按鈕，去修改aduio.muted屬性，該屬性有兩個值: true(靜音)，false(不靜音)。 注意，靜音的時候，音頻的進度條還是會繼續往前走的。

音頻下載是一個a鏈接，記得加上download屬性，不然瀏覽器會在新標簽打開音頻，而不是下載音頻

下載

音頻的個性化配置有很多，大家可以自己擴展，通過父組件傳遞響應的值，可以做到個性化設置。

 controlList: {
  // 不顯示下載
  noDownload: false,
  // 不顯示靜音
  noMuted: false,
  // 不顯示音量條
  noVolume: false,
  // 不顯示進度條
  noProcess: false,
  // 只能播放一個
  onlyOnePlaying: false,
  // 不要快進按鈕
  noSpeed: false
}

setControlList () {
    let controlList = this.theControlList.split(" ")
    controlList.forEach((item) => {
      if(this.controlList[item] !== undefined){
        this.controlList[item] = true
      }
    })
},

例如父組件這樣

大多數時候，我們希望頁面上播放一個音頻時，其他音頻可以暫停。
[...audios]可以把一個類數組轉化成數組，這個是我常用的。

onPlay (res) {
    console.log(res)
    this.audio.playing = true
    this.audio.loading = false
    
    if(!this.controlList.onlyOnePlaying){
      return 
    }
    
    let target = res.target
    
    let audios = document.getElementsByTagName("audio");
    // 如果設置了排他性，當前音頻播放是，其他音頻都要暫停
    [...audios].forEach((item) => {
      if(item !== target){
        item.pause()
      }
    })
},

如果你需要一個小型的vue音樂播放器，你可以試試vue-aplayer, 該播放器不僅僅支持vue組件，非Vue的也支持，你可以看看他們的demo

使用 JavaScript 實現簡單的拖拽

audio 相關API 以及事件

使用 HTML5 音頻和視頻

掃碼訂閱我的微信公眾號：洞香春天。每天一篇技術短文，讓知識不再高冷。