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

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript