react 中Wavesurfer绘制音频波形图_wavesurfer.js react

一、效果

二、使用

1、npm 安装

npm install wavesurfer.js --save
1

2、引入

import WaveSurfer from 'wavesurfer.js' //导入wavesurfer.js
import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js' //导入时间轴插件
1
2

3、绘制

drawPlay=()=>{
        this.wavesurfer = WaveSurfer.create({
            container: '#audioChart',//容器
            waveColor: '#1DE3FA',//波形图颜色
            progressColor: '#159faf',//进度条颜色
            backend: 'MediaElement',
            mediaControls: false,
            audioRate: '1',//播放音频的速度
            //插件
            plugins: [
                //时间轴插件
                // Timeline.create({
                //     container: '#wave-timeline'
                // }),
                // 光标插件
                // CursorPlugin.create({
                //     showTime: true,
                //     opacity: 1,
                //     customShowTimeStyle: {
                //         backgroundColor: '#000',
                //         color: '#fff',
                //         padding: '2px',
                //         fontSize: '10px'
                //     }
                // }),
            ]
        });
        // 特别提醒：此处需要使用require(相对路径)，否则会报错
        this.wavesurfer.load(require('../../static/testAudio/Last_Stop.mp3'));
    }
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

三、有坑

这里要加require，否则波形图不显示或者会报错！！！！

this.wavesurfer.load(require('../../static/testAudio/Last_Stop.mp3'));
1