react 中Wavesurfer绘制音频波形图

最新推荐文章于 2025-04-21 10:51:01 发布

山鬼taro

最新推荐文章于 2025-04-21 10:51:01 发布

阅读量2.3k

点赞数 1

分类专栏：浏览器拾音（喊话）文章标签： reactjs

本文链接：https://blog.csdn.net/sinat_36359516/article/details/115122875

版权

浏览器拾音（喊话）专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了如何使用wavesurfer.js库来绘制音频波形图，并详细讲解了安装、引入和配置过程，包括加载音频文件和启用时间轴插件。特别注意在加载音频时需要使用require来避免错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果

在这里插入图片描述

二、使用

1、npm 安装

npm install wavesurfer.js --save

2、引入

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

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'));
    }

三、有坑

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

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