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

https://wavesurfer.xyz/

创建实例

1. 引入插件：import WaveSurfer from "wavesurfer.js"
2. 创建实例对象：`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?: ((peaks, ctx) => void);
    sampleRate?: number;
    splitChannels?: Partial<WaveSurferOptions>[]; // 对于不同通道的音频使用分开的波形渲染
    url?: string;
    waveColor?: string | string[] | CanvasGradient; // 光标后面的波形的填充颜色
    width?: number | string;
}

method

方法	说明
destroy(): void	销毁waveform，移除事件，元素和关联节点
empty(): void	清空waveform
exportImage(format: string, quality: number, type: "dataURL"): Promise
exportImage(format: string, quality: number, type: "blob"): Promise
exportPeaks(__namedParameters?): number[][]
getActivePlugins(): GenericPlugin[]	返回当前已初始化插件的map
getCurrentTime(): number	获取当前播放的进度，单位：秒
getDecodedData(): null | AudioBuffer
getDuration(): number	获取音频的总时长，单位：秒
getMediaElement(): HTMLMediaElement
getMuted(): boolean	返回当前的静音状态.
getScroll(): number
getPlaybackRate(): number	返回音频片段的播放速度
getVolume(): number	获取音量
getWrapper(): HTMLElement
isPlaying(): boolean	判断音频是否在播放
isSeeking(): boolean
load(url: string, channelData?: (Float32Array | number[])[] , duration?: number): Promise	加载音频
loadBlob(blob: Blob, channelData?: (Float32Array | number[])[], duration?: number): Promise	从Bolb或者file对象中调用音频
on(event: EventName, listener: EventListener, options?): (() => void)
once(event, listener): (() => void)
pause(): void	停止播放
play(): Promise	从当前位置开始播放音频文件。结合使用start和end可以指定一个音频播放范围
playPause(): Promise	如果当前为状态状态开始播放，反之暂停播放
registerPlugin(plugin): T
seekTo(progress): void
setMediaElement(element: HTMLMediaElement): void
setMuted(muted: boolean): void
setOptions(options: Partial): void
setPlaybackRate(rate: number, preservePitch?: boolean): void
setSinkId(sinkId: string): Promise
setTime(time: number): void
setVolume(volume: number): void	设置音量[0-1]
skip(seconds: number): void	调到offset的位置
stop(): void	停止播放并回到音频文件的起始处
toggleInteraction(isInteractive: boolean): void
un(event, listener): void	解绑事件
unAll(): void
zoom(minPxPerSec: number): void	水平放大或缩小波形，参数是每秒音频的水平像素

接收Blob流

通过XMLHttpRequest对象向后端发出请求，获取音频数据的blob流。然后通过WaveSurfer.create()方法创建一个wavesurfer实例，传入一个容器元素和一些配置选项。最后调用loadBlob()方法将blob数据传递给wavesurfer进行处理。这样就可以在前端使用wavesurfer.js处理后端传递过来的音频数据了。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/audio', true);
xhr.responseType = 'blob';
xhr.onload = function() {
  if (this.status == 200) {
    var blob = this.response;
    // 使用wavesurfer.js处理音频数据
    var wavesurfer = WaveSurfer.create({
      container: '#waveform',
      backend: 'MediaElement',
      mediaType: 'audio',
      waveColor: 'blue',
      progressColor: 'purple',
      cursorColor: 'navy'
    });
    wavesurfer.loadBlob(blob);
  }
};
xhr.send();

或

this.socket = new WebSocket('ws://localhost:8080')
this.socket.binaryType = 'arraybuffer'
this.socket.onmessage = (event) => {
  let blob = new Blob([event.data], { type: 'audio/wav' })
  let objectURL = URL.createObjectURL(blob)
  this.wavesurfer.load(objectURL)
  this.wavesurfer.on('finish', () => {
    URL.revokeObjectURL(objectURL)
  })
}