vue中audio标签自定义音频播放栏

效果

效果链接：https://livequeen.top

 实现

这里只主要讲底部audio音乐播放控制栏的功能实现及css样式。我的思路是在本地存储中存储两个对象【播放列表】musiclist及【当前播放歌曲】nowmusic,并且在打开页面时先不自动播放，等进行过播放、切歌等操作后才会自动播放，并且已循环播放的形式执行。

1、audio标签配置

:src	【动态赋值音乐链接，MP3格式】
@timeupdate	【当目前的播放位置已更改时触发】
@end	【当歌曲结束时触发】
@loadedmetadata	【当浏览器已加载音频/视频的元数据时触发】
@play	【当歌曲播放时触发】
@pause	【当歌曲暂停时触发】
:autoplay	【动态赋值是否在音乐准备就绪时，自动播放】
controls	【设置或返回音频是否应该显示控件（比如播放/暂停等）】

2、el-slider进度条配置

change	【进度条数值发生改变时触发】
format-tooltip	【拖拽进度条鼠标松开后触发】
v-model	【实时显示播放位置】
max	【歌曲总时长】

      
      

        
        

          
          

            {{ this.transTime(current) }}
          
            
            
            
          
          

            {{ this.transTime(duration) }}
          
        
        
        

          
          
          
          
          
          
          
        

      

3、参数设置

data () {
    return {
      // 搜索参数
      key: '',
      currentPage: 1,
      pageSize: 10,
      // 加载开启
      isloading: false,
      // table的key
      userinformationkey: '',
      // 展示alluser数据
      tableData: {},
      // 播放列表
      musiclist: [],
      // 当前播放歌曲
      nowmusic: {},
      // 当前播放任务
      audio: null,
      contorl: null,
      // 当前播放时刻
      current: 0,
      // 播放总时长
      duration: 0,
      // 是否正在播放
      isPlay: false,
      // 是否自动播放
      isauto: false,
      // 当前进度条位置
      cacheCurrent: 0,
      // 判断是否为移动手机
      isMobile: false
    }

 4、初始化配置【关键】

通过【localstorge.getItem('key')】获取本地存储的播放列表，并通过【this.$refs.audio】绑定audio标签，实现自定义控制。

    init () {
      let now = {}
      let type = 'convert_url3'

      // 初始化播放列表
      if (localStorage.getItem('musiclist') !== null) {
        this.musiclist = JSON.parse(localStorage.getItem('musiclist'))
      }
      // 初始化当前歌曲，但还需要获取歌曲链接
      if (localStorage.getItem('nowmusic') !== null) {
        now = JSON.parse(localStorage.getItem('nowmusic'))
      }
      // 判断有无当前播放歌曲，是否需要获取播放链接
      if (now !== null & now !== '') {
        // 初始化当前播放音乐链接
        this.$api.getmusiclink(now.rid, type)
          .then(res => {
            if (res.data.code === 200) {
              let link = res.data.data
              now.link = ''
              now.link = link
              this.nowmusic = now
              // 绑定audio标签，实现对其自定义控制
              this.audio = this.$refs.audio
              this.contorl = this.$refs.contorl
            }
          })
      }
    }

 5、在绑定audio标签后，就可以实现自定义音频的各类【监听及控制】

    
    // 音频播放暂停
    audioPlay (status) {
      if (status) {
        this.audio.play()
        this.isauto = true
      } else {
        this.audio.pause()
      }
      this.isPlay = status
    },
    // 切歌
    switchmusic (key) {
      let type = 'convert_url3'
      // 上一首
      if (key === 'up') {
        let newid = this.nowmusic.id - 1
        // 判断是否是第一首，如果不是，正常播放上一首，如果是，循环播放倒数第一首
        if (newid > -1) {
          let now = this.musiclist[newid]
          now.id = newid
          // 获取音乐链接
          this.$api.getmusiclink(now.rid, type)
            .then(res => {
              if (res.data.code === 200) {
                let link = res.data.data
                localStorage.setItem('nowmusic', JSON.stringify(now))
                this.isauto = true
                now.link = ''
                now.link = link
                this.nowmusic = now
              }
            })
        } else {
          let now = this.musiclist[this.musiclist.length - 1]
          now.id = this.musiclist.length - 1
          // 获取音乐链接
          this.$api.getmusiclink(now.rid, type)
            .then(res => {
              if (res.data.code === 200) {
                let link = res.data.data
                localStorage.setItem('nowmusic', JSON.stringify(now))
                this.isauto = true
                now.link = ''
                now.link = link
                this.nowmusic = now
              }
            })
        }
      } else {
        // 下一首
        let newid = this.nowmusic.id + 1
        // 判断是否是最后一首，如果不是，则正常播放下一首，如果是，则循环播放第一首
        if (newid + 1 <= this.musiclist.length) {
          let now = this.musiclist[newid]
          now.id = newid
          // 获取音乐链接
          this.$api.getmusiclink(now.rid, type)
            .then(res => {
              if (res.data.code === 200) {
                let link = res.data.data
                localStorage.setItem('nowmusic', JSON.stringify(now))
                this.isauto = true
                now.link = ''
                now.link = link
                this.nowmusic = now
              }
            })
        } else {
          let now = this.musiclist[0]
          now.id = 0
          // 获取音乐链接
          this.$api.getmusiclink(now.rid, type)
            .then(res => {
              if (res.data.code === 200) {
                let link = res.data.data
                localStorage.setItem('nowmusic', JSON.stringify(now))
                this.isauto = true
                now.link = ''
                now.link = link
                this.nowmusic = now
              }
            })
        }
      }
    },
    // 更新进度条与当前播放时间
    updateProgress (e) {
      this.current = e.target.currentTime
    },
    // 拖动进度滚动条
    progressChange () {
      this.$refs.audio.currentTime = this.cacheCurrent
      this.current = this.cacheCurrent
    },
    // 实时返回当前进度位置
    realFormatSecond (second) {
      this.cacheCurrent = second
      return this.transTime(second)
    },
    // 音频结束
    end (e) {
      this.isPlay = false
      this.switchmusic('down')
    },
    // 获取音频总时长
    loadedmetadata (e) {
      this.duration = e.target.duration
    },
    // 音频时间格式化显示
    transTime (value) {
      let that = this
      var time = ''
      var h = parseInt(`${value / 3600}`)
      value %= 3600
      var m = parseInt(`${value / 60}`)
      var s = parseInt(`${value % 60}`)
      if (h > 0) {
        time = that.formatTime(h + ':' + m + ':' + s)
      } else {
        time = that.formatTime(m + ':' + s)
      }
      return time
    },
    // 歌曲歌手名长度处理
    transName (name) {
      if (name !== undefined) {
        if (name.length > 12) {
          name = name.substring(0, 11) + '...'
        }
      }
      return name
    },
    // 补零
    formatTime (value) {
      var time = ''
      var s = value.split(':')
      var i = 0
      for (; i < s.length - 1; i++) {
        time += s[i].length === 1 ? '0' + s[i] : s[i]
        time += ':'
      }
      time += s[i].length === 1 ? '0' + s[i] : s[i]

      return time
    }

完整代码