vue绘制语音波形图---wavesurfer.js

初学小白Lu

已于 2024-03-11 09:57:01 修改

阅读量5.4k

点赞数 26

分类专栏：前端文章标签： javascript vue.js 前端 wavesurfer.js

于 2024-02-04 15:45:22 首次发布

本文链接：https://blog.csdn.net/weixin_43956958/article/details/136022085

版权

本文介绍了如何使用wavesurfer.js库处理来自Blob流或WebSocket的音频数据，包括创建实例、配置选项，以及实现实时声音播放和前端音频流处理的技术细节。

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

https://wavesurfer.xyz/

创建实例

引入插件：import WaveSurfer from "wavesurfer.js"
创建实例对象：`this.wavesurfer = WaveSurfer.create(options);

<div id="waveform">
  <!-- the waveform will be rendered here -->
</div>

<script type="module">
import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'

const wavesurfer = WaveSurfer.create({
   
  container: '#waveform',
  waveColor: '#4F4A85',
  progressColor: '#383351',
  url: '/audio.mp3',
})

wavesurfer.on('interaction', () => {
   
  wavesurfer.play()
})

options

WaveSurferOptions: {
   
    audioRate?: number; // 音频的播放速度，数值越小越慢
    autoCenter?: boolean; // 如果有滚动条，将波形根据进度居中
    autoScroll?: boolean;
    autoplay?: boolean;
    backend?: "WebAudio" | "MediaElement";
    barAlign?: "top" | "bottom";
    barGap?: number; // 波纹柱状图之间的间距
    barHeight?: number; // 波纹柱状图的高度，当大于1的时候，将增加设置的高度
    barRadius?: number; // 波形条的radius
    barWidth?: number; // 如果设置，波纹的样式将变成类似柱状图的形状
    container: HTMLElement | string; // 必填参数，指定渲染的dom的id名、类名或者dom本身
    cursorColor?: string; // 鼠标点击的颜色
    cursorWidth?: number; // 鼠标点击显示的宽度
    dragToSeek?: boolean;
    duration?: number;
    fetchParams?: RequestInit;
    fillParent?: boolean;
    height?: number | "auto"; // 音频的显示高度
    hideScrollbar?: boolean; // 是否隐藏水平滚动条
    interact?: boolean; // 初始化时是否启用鼠标交互。之后可以随时切换该参数
    media?: HTMLMediaElement;
    mediaControls?: boolean; // (与 MediaElement一起使用) 为true则将启动媒体元素的本机控件
    minPxPerSec?: number; // 音频每秒最小像素数
    normalize?: boolean; // 如果为true，则以最大峰值而非1.0进行归一化
    peaks?: (Float32Array | number[])[];
    plugins?: GenericPlugin[]; // 使用的插件
    progressColor?: string | string[] | CanvasGradient; // 光标后面的波形部分的填充颜色
    renderFunction

最低0.47元/天解锁文章