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

r囧r小猫 2022-12-23 09:58 209阅读 0赞

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

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

![在这里插入图片描述][20201124161021320.png_pic_center]

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">
              
            </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>

[20201124161021320.png_pic_center]: /images/20221120/2b093464d1ea437f85f7cb5ce1c1bc30.png