vue绘制语音波形图---wavesurfer.js
文章目录
- 创建实例
- options
- method
- 接收Blob流
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; // 波形条的radiusbarWidth?: 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<string[]> | |
| exportImage(format: string, quality: number, type: "blob"): Promise<Blob[]> | |
| 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<void> | 加载音频 |
| loadBlob(blob: Blob, channelData?: (Float32Array | number[])[], duration?: number): Promise<void> | 从Bolb或者file对象中调用音频 |
| on<EventName>(event: EventName, listener: EventListener<WaveSurferEvents, EventName>, options?): (() => void) | |
| once<EventName>(event, listener): (() => void) | |
| pause(): void | 停止播放 |
| play(): Promise<void> | 从当前位置开始播放音频文件。结合使用start和end可以指定一个音频播放范围 |
| playPause(): Promise<void> | 如果当前为状态状态开始播放，反之暂停播放 |
| registerPlugin<T>(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<EventName>(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)})
}