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

2024-02-05 18:12

本文主要是介绍vue绘制语音波形图---wavesurfer.js,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 创建实例
  • options
  • method
  • 接收Blob流

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; // 波形条的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)})
}

这篇关于vue绘制语音波形图---wavesurfer.js的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/681755

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

使用Python实现文本转语音(TTS)并播放音频

《使用Python实现文本转语音(TTS)并播放音频》在开发涉及语音交互或需要语音提示的应用时,文本转语音(TTS)技术是一个非常实用的工具,下面我们来看看如何使用gTTS和playsound库将文本... 目录什么是 gTTS 和 playsound安装依赖库实现步骤 1. 导入库2. 定义文本和语言 3

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js