vue 音頻組件

一、概述

因項目要求，需要做一個音頻播放器。

 

二、demo

test.vue

<template>
  <div>
    <img src="../assets/audio-bg.png" alt="">
    <br>
    <!-- 此處的ref屬性，可以很方便的在vue組件中通過 this.$refs.audio獲取該dom元素 -->
    <audio ref="audio"
           @pause="onPause"
           @play="onPlay"
           @timeupdate="onTimeupdate"
           @loadedmetadata="onLoadedmetadata"
           src="https://wdd.js.org/element-audio/static/falling-star.mp3"
           controls="controls">

    </audio>

    <!-- 音頻播放控件 -->
<!--    <div>-->
<!--      <el-button type="text" @click="startPlayOrPause">{{audio.playing | transPlayPause}}</el-button>-->

<!--      <el-tag type="info">{{ audio.currentTime | formatSecond}}</el-tag>-->

<!--      <el-tag type="info">{{ audio.maxTime | formatSecond}}</el-tag>-->
<!--    </div>-->
  </div>
</template>

<script>

  // 將整數轉換成 時：分：秒的格式
  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'
    }
  }

  export default {
    data () {
      return {
        audio: {
          // 該字段是音頻是否處於播放狀態的屬性
          playing: false,
          // 音頻當前播放時長
          currentTime: 0,
          // 音頻最大播放時長
          maxTime: 0
        }
      }
    },
    methods: {
      // 控制音頻的播放與暫停
      startPlayOrPause () {
        return this.audio.playing ? this.pause() : this.play()
      },
      // 播放音頻
      play () {
        this.$refs.audio.play()
      },
      // 暫停音頻
      pause () {
        this.$refs.audio.pause()
      },
      // 當音頻播放
      onPlay () {
        this.audio.playing = true
      },
      // 當音頻暫停
      onPause () {
        this.audio.playing = false
      },
      // 當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)
      }
    },
    filters: {
      // 使用組件過濾器來動態改變按鈕的顯示
      transPlayPause(value) {
        return value ? '暫停' : '播放'
      },
      // 將整數轉化成時分秒
      formatSecond(second = 0) {
        return realFormatSecond(second)
      }
    }
  }
</script>

<style>

</style>

注意：這裏有一張背景圖片，大家可以從百度中下載。

 

效果如下：

 

這裏的功能有幾個：開始/暫停，顯示音頻時長，設置音量大小，設置播放倍數。

 

關於更多代碼的解釋，請查看下面的參考鏈接，裏面有詳細的描述，這裏就不在敘述了。

 

本文參考鏈接：

https://segmentfault.com/a/1190000012453975