基于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)
      })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

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

  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
      })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13

三：播放时读取标记

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

  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
          }
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

然后在watch 里面去监控

三：总结

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

如需完整的demo,请联系1015095073@qq.com
1