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

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

阿里开源语音识别SenseVoiceWindows环境部署

SenseVoice介绍 SenseVoice 专注于高精度多语言语音识别、情感辨识和音频事件检测多语言识别: 采用超过 40 万小时数据训练,支持超过 50 种语言,识别效果上优于 Whisper 模型。富文本识别:具备优秀的情感识别,能够在测试数据上达到和超过目前最佳情感识别模型的效果。支持声音事件检测能力,支持音乐、掌声、笑声、哭声、咳嗽、喷嚏等多种常见人机交互事件进行检测。高效推

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

【WebGPU Unleashed】1.1 绘制三角形

一部2024新的WebGPU教程,作者Shi Yan。内容很好,翻译过来与大家共享,内容上会有改动,加上自己的理解。更多精彩内容尽在 dt.sim3d.cn ,关注公众号【sky的数孪技术】,技术交流、源码下载请添加微信号:digital_twin123 在 3D 渲染领域,三角形是最基本的绘制元素。在这里,我们将学习如何绘制单个三角形。接下来我们将制作一个简单的着色器来定义三角形内的像素

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能