vue 中使用wavesurfer.js绘制音频图案_vue 音量图

原文链接：https://blog.csdn.net/zrcj0706/article/details/104656157/

实现效果如下，包含后退，播放暂停，前进，指定播放，音量，播放倍速修改等功能

1、常用的方法如下：

playPause() //播放时暂停，播放时暂停
skip(number) //从当前位置跳数秒（使用负值向后移动）
stop() //重放
setVolume(newVolume) //将播放音量设置为新值[0…1]（0 =静音，1 =最大）
play([start[, end]]) //从当前位置开始播放。可选start且end以秒为单位可用于设置要播放的音频范围

2、使用代码如下

<template>
  <div class="mixin-components-container">
    <el-row>
      <el-card class="box-card" style="text-align:left">
        <div id="waveform" ref="waveform">
          <!-- Here be the waveform -->
        </div>
        <div id="wave-timeline" ref="wave-timeline">
          <!--时间轴 -->  
        </div>
        <div>
           <el-button type="primary" @click="rew">后退</el-button>
          <el-button type="primary" @click="plays">
            <i class="el-icon-video-play"></i>
            播放 /
            <i class="el-icon-video-pausee"></i>
            暂停
          </el-button>
           <el-button type="primary" @click="speek">前进</el-button>
           <el-button type="primary" @click="replay">重放</el-button>
             <el-tooltip class="item" effect="dark" content="指定播放" placement="bottom">
              <el-popover placement="top" width="200" trigger="click">
                <el-input v-model="appointTime" placeholder="请输入内容" class="input-with-select">
                  <el-button slot="append" @click="appointPlay">播放</el-button>
                </el-input>
                <el-button slot="reference" circle>
                  指定播放
                </el-button>
              </el-popover>
            </el-tooltip>
             <span style="border: 2px solid #2f4f4f;margin-left: 8px;margin-right: 4px" />
            <el-tooltip class="item" effect="dark" content="音量" placement="bottom">
              <el-popover placement="top-start" trigger="click" style="min-width: 38px;margin-left: 10px">
                <div class="block" style="width: 42px">
                  <el-slider v-model="value" vertical height="100px" @change="setVolume" />
                </div>
                <el-button slot="reference" circle>
                  音量
                </el-button>
              </el-popover>
            </el-tooltip>
             <el-tooltip class="item" effect="dark" content="播放倍速" placement="bottom">
              <el-popover placement="top" width="220" trigger="click" style="margin-left: 10px">
                <el-input-number v-model="ds" width="180" :precision="2" :step="0.1" :min="0.5" :max="2" @change="DoubleSpeed" />
                <el-button slot="reference" round>
                  {{ ds +' X' }}
                </el-button>
              </el-popover>
            </el-tooltip>
        </div>
      </el-card>
    </el-row>
  </div>
</template>
<script>
import WaveSurfer from 'wavesurfer.js'
import CursorPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.cursor.js'
import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js'
export default {
  name: "Details",
  // components: { MyWaveSurfer },
  data() {
    return {
      wavesurfer: null,
      // 指定播放功能的播放时间点
      appointTime: 1,
      // 播放倍速
      ds: 1.00,
      // 设置音量
      value: 0,
    };
  },
  mounted() {
    this.$nextTick(() => {
      console.log(WaveSurfer)
      this.wavesurfer = WaveSurfer.create({
        // 应该在其中绘制波形的CSS选择器或HTML元素。这是唯一必需的参数。
        container: this.$refs.waveform,
        // 光标的填充颜色，指示播放头的位置。
        cursorColor:'red',
        // 更改波形容器的背景颜色。
        backgroundColor:'gray',
        // 光标后的波形填充颜色。
        waveColor: 'violet',
        // 光标后面的波形部分的填充色。当progressColor和waveColor相同时，完全不渲染进度波
        progressColor: 'purple',
        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'
          }),
        ]
      });
      this.wavesurfer.on('error', function(e) {
        console.warn(e);
      });
      this.wavesurfer.load(require('./peaks/sample.mp3'));
      // this.value = this.wavesurfer.getVolume() * 100
    })
  },
  methods: {
    // 播放时暂停，播放时暂停
    plays() {
      this.wavesurfer.playPause()
    },
    // 后退，
    rew() {
      this.wavesurfer.skip(-3)
    },
    // 前进，
    speek() {
      this.wavesurfer.skip(3)
    },
    // 重放
    replay() {
      this.wavesurfer.stop()
    },
    // 设置音量：
    setVolume(val) {
      this.wavesurfer.setVolume(val / 100)
    },
    // 指定播放
    appointPlay() {
      this.wavesurfer.play([this.appointTime,])
    },
  }
}
</script>
<style scoped>
.mixin-components-container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}
</style>
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152