[vue element] el-slider audio 音乐播放 有进度条

<template>
  <div>
    <audio ref="audio" id="audio" src="../../assets/audio/audio.mp3"
           @pause="onPause"
           @play="onPlay"
           @timeupdate="onTimeupdate"
           @loadedmetadata="onLoadedmetadata">
      您的浏览器不支持audio标签
    audio>
    <div class="custom-audio clearfix">
      <div class="audio-item play" @click="play" v-if="!audio.playing">
        <img src="../../assets/audio/play.png" width="20"/>
      div>
      <div class="audio-item play" @click="pause" v-if="audio.playing">
        <img src="../../assets/audio/pause.png" width="20"/>
      div>
      <div class="audio-item mute" @click="mute" v-if="!audio.muted">
        <img src="../../assets/audio/cancleMute.png" width="20"/>
      div>
      <div class="audio-item mute" @click="cancelMute" v-if="audio.muted">
        <img src="../../assets/audio/mute.png" width="20"/>
      div>
      <div class="audio-item play-time">{{ audio.currentTime | formatSecond}}div>
      <div class="audio-item progress">
      
        <el-slider 
        	@change="progressChange" 
        	v-model="audio.currentTime" 
        	:format-tooltip="realFormatSecond"
          	:max="audio.maxTime">
        el-slider>
        
      div>
      
      <div class="audio-item total-time">{{ audio.maxTime | formatSecond}}div>
    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 ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
    } else {
      return '00:00'
    }
  }
  
  export default {
    name: "CustomAudio",
    data() {
      return {
        value: 20,
        audio: {
          // 播放状态
          playing: false,
          // 静音状态
          muted: false,
          // 音频当前播放时长
          currentTime: 0,
          // 音量
          volume: 1,
          // 音频最大播放时长
          maxTime: 0
        },
        cacheCurrent: 0,
        cacheVoice: 1,
      }
    },
    methods: {
      // 音频相关方法
      // 播放音频
      play() {
        this.$refs.audio.play()
      },
      // 暂停音频
      pause() {
        this.$refs.audio.pause()
      },
      // 当音频播放
      onPlay() {
        this.audio.playing = true
      },
      // 当音频暂停
      onPause() {
        this.audio.playing = false
      },
      // 静音
      mute() {
        this.audio.volume = 0;
        this.audio.muted = true;
        this.$refs.audio.muted = true;
      },
      // 取消静音
      cancelMute() {
        this.audio.muted = false;
        this.$refs.audio.muted = false;
      },
      // 拖动进度滚动条
      progressChange() {
        console.log('拖动滚动条触发', this.cacheCurrent);
        this.$refs.audio.currentTime = this.cacheCurrent;
        this.audio.currentTime = this.cacheCurrent
      },
      // 当timeupdate事件大概每秒一次，用来更新音频流的当前播放时间
      onTimeupdate(res) {
       // 0,0.1,0.2,...1,1.1,...2,...10
        this.audio.currentTime = res.target.currentTime
      },
      // 获取音频长度
      onLoadedmetadata(res) {
        this.audio.maxTime = parseInt(res.target.duration)
      },
      realFormatSecond(second) {
        console.log('自动播放触发', second);
        this.cacheCurrent = second;
        return realFormatSecond(second);
      },
    },
    filters: {
      // 将整数转化成时分秒
      formatSecond(second = 0) {
        return realFormatSecond(second)
      }
    }
  }

</script>

vue+element 实现音乐播放（已修正element slider自动滑动的bug）