基于wavesurfer.js 制作音乐播放器，支持音频标记，修改，播放时读取标记

最新收到一个需求，需要做一个音乐播放器，同时可以在音频上进行标记颜色，并修改颜色和播放的位置，同时播放的时候，播放到标记的位置上进行提示。来看一下编辑的效果图:
查看的效果图：

视频效果: 动画效果

一：引入安装wavesurfer.js音频插件

使用npm安装：npm i wavesurfer.js --save ，最好安装6.6左右的版本，新版本可能会有点问题，

二：封装音频组件，并标记音频区域

初始化waveSurfer，部分代码如下：

 initMusic() {
    
    
      this.loading = true
      this.$nextTick(() => {
    
    
        // console.log('加载WaveSurfer')
        // console.log(WaveSurfer)
        this.wavesurfer = WaveSurfer.create({
    
    
          // 应该在其中绘制波形的CSS选择器或HTML元素。这是唯一必需的参数。
          container: this.$refs.waveform,
          // 光标的填充颜色，指示播放头的位置。
          cursorColor: '#e0e4e9',
          // 更改波形容器的背景颜色。
          backgroundColor: '#124780',
          // 光标后的波形填充颜色。
          waveColor: '#4da3ff',
          // 光标后面的波形部分的填充色。当progressColor和waveColor相同时，完全不渲染进度波
          progressColor: '#a2cdfb',
          backend: 'MediaElement',
          // 音频播放时间轴
          mediaControls: false,
          // 播放音频的速度
          audioRate: '1',
          // 插件：此教程配置了光标插件和时间轴插件
          plugins: [
            // 光标插件
            // CursorPlugin.create({
    
    
            //   showTime: true,
            //   opacity: 1,
            //   customShowTimeStyle: {
    
    
            //     'background-color': '#000',
            //     color: '#fff',
            //     padding: '2px',
            //     'font-size': '10px'
            //   }
            // }),
            // 时间轴插件
            Timeline.create({
    
    
              container: '#wave-timeline'
            }),
            RegionsPlugin.create({
    
    }) // 开启标注区
          ]
        })
        this.wavesurfer.on('error', e => {
    
    
          console.warn(e)
        })

        // 加载音频url
        this.wavesurfer.load(this.voiceSrc)
        this.volumeValue = this.wavesurfer.getVolume() * 100
        // this.wavesurfer.on('region-update-end', obj => {
    
    
        //   // 标注区更新
        //   this.toUpdateShowList(obj)
        // })

        this.wavesurfer.on('audioprocess', () => {
    
    
          if (this.wavesurfer.isPlaying()) {
    
    
            this.totalTime = parseInt(this.wavesurfer.getDuration())
            this.currentTime = parseInt(this.wavesurfer.getCurrentTime())
            this.currentSecond = parseInt(this.wavesurfer.getCurrentTime())

            this.arrList.push(this.currentTime)

            this.arrList = [...new Set(this.arrList)]
            // this.arrList.map((item, index) => {
    
    
            //   if (item === this.totalTime) {
    
    
            //     this.arrList.splice(index, 1)
            //   }
            // })

            // var remainingTime = totalTime - currentTime
          }
        })
        // this.wavesurfer.enableDragSelection({}) // 允许鼠标拖动创建标注区
        // this.drawRegion() // 有标注则自动绘制已标注部分
        setTimeout(() => {
    
    
          this.loading = false
        }, 1500)
      })
    },

在音频上打标记，部分代码:

  makeMarker() {
    
    
      this.wavesurfer.pause()
      this.wavesurfer.clearRegions()
      this.showList.push({
    
     time: Number(this.currentTime), color: 'rgb(15 255 55)' })
      this.showList.map(o => {
    
    
        this.drawRegion(o)
      })
      this.$emit('makeMarker', {
    
    
        currentTime: this.currentTime,
        currentSecond: this.currentSecond,
        index: this.index
      })
    },

三：播放时读取标记

由于播放的音频精确到毫秒，所以你需要去重一下，具体的代码如下：

  this.wavesurfer.on('audioprocess', () => {
    
    
          if (this.wavesurfer.isPlaying()) {
    
    
            this.totalTime = parseInt(this.wavesurfer.getDuration())
            this.currentTime = parseInt(this.wavesurfer.getCurrentTime())
            this.currentSecond = parseInt(this.wavesurfer.getCurrentTime())

            this.arrList.push(this.currentTime)

            this.arrList = [...new Set(this.arrList)]
            // this.arrList.map((item, index) => {
    
    
            //   if (item === this.totalTime) {
    
    
            //     this.arrList.splice(index, 1)
            //   }
            // })

            // var remainingTime = totalTime - currentTime
          }
        })

然后在watch 里面去监控

三：总结

至此，大致的功能基本实现了

如需完整的demo,请联系[email protected]