vue + element 音频播放控件

参考: https://github.com/wangduanduan/element-audio

效果：

代码：

// 音乐播放组件
<template>
  <div id='playMusic'>
    <audio ref='audio' :src='src'
     @pause="onPause"
     @play='onplay'
     @timeupdate="onTimeupdate"
     @loadedmetadata="onLoadedmetadata"></audio>

    <el-button type='text' @click='startPlayOrPause'>{{audio.playing | transPlayPause}}</el-button>

    <!-- 进度条 -->
    <el-slider v-model="sliderTime" :format-tooltip="formatProcessToolTip" @change="changeCurrentTime" class="slider"></el-slider>

    <span>{{audio.currentTime | formartSecond}} / </span>

    <span>{{audio.maxTime | formartSecond}}</span>

  </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 {
  name: 'playMusic',
  props: {
    src: {
      type: String,
      default: ''
    }
  },
  methods: {
    /* 进度条格式化toolTip */
    formatProcessToolTip (index = 0) {
      index = parseInt(this.audio.maxTime / 100 * index)
      return '时长：' + realFormatSecond(index)
    },
    /* 拖动进度条，改变当前时间 index是进度条改变时的回调函数的参数 值为0~100之间，需要换算成实际时间 */
    changeCurrentTime (index) {
      this.$refs.audio.currentTime = parseInt(index / 100 * this.audio.maxTime)
    },
    /* 音频加载完成后的回调函数 */
    onLoadedmetadata (res) {
      console.log(111)
      this.audio.maxTime = parseInt(res.target.duration)
    },
    /* 每秒触发一次 用来更新当前播放时间 */
    onTimeupdate (res) {
      this.audio.currentTime = res.target.currentTime
      /* 当音频播放时 进度条也要随之改变 */
      this.sliderTime = parseInt(this.audio.currentTime / this.audio.maxTime * 100)
    },
    /* 控制音频播放、暂停 */
    startPlayOrPause () {
      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
    }
  },
  data () {
    return {
      sliderTime: 0,
      audio: {
        maxTime: 0, /* 音频最大播放时长 */
        currentTime: 0, /* 当前播放时长 */
        playing: false /* 音频当前处于播放/暂停状态 */
      }
    }
  },
  filters: {
    /* 使用vue过滤器动态改变按钮的显示 */
    transPlayPause (value) {
      return value ? '暂停' : '播放'
    },
    /* 整数转换时分秒 */
    formartSecond (second = 0) {
      return realFormatSecond(second)
    }
  }
}
</script>

<style lang="less">
#playMusic {
  display: flex;
  align-items: center;
  .el-button {
    margin-right: 15px;
  }
  .slider {
    width: 150px;
    margin-right: 15px;
  }
  > span:nth-of-type(2) {
    margin-left: 5px;
  }
}
</style>