Wavesurfer.js -js音频可视化插件下载

发布时间: 编辑:WANG 0人评论 6081次浏览 jQuery插件
Wavesurfer.js -js音频可视化插件下载
文件大小:225KB 文件版本:1.0 支持语言:简体中文 网友评分: 2分
更新日期:2024-11-04 下载次数:826 来自:未知

软件介绍

简介:Wavesurfer.js是一个javascript库用于创建交互式可操作音频可视化,使用Web Audio和HTML5 Canvas技术。可以显示当前音频的声波

Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件

js音频可视化插件Wavesurfer.js图片预览

js音频可视化插件Wavesurfer.js图片预览

Wavesurfer.js -js音频可视化插件使用方法

1、创建实例


引入插件

import WaveSurfer from "wavesurfer.js";
创建实例对象

this.wavesurfer = WaveSurfer.create(options);
options

参数 默认值 说明 audioRate 1 音频的播放速度,数值越小越慢 barWidth none 如果设置,波纹的样式将变成类似柱状图的形状 barHeight 1 波纹柱状图的高度,当大于1的时候,将增加设置的高度 barGap none 波纹柱状图之间的间距 container none 必填参数,指定渲染的dom的id名、类名或者dom本身 cursorColor none 鼠标点击的颜色 cursorWidth 1 鼠标点击显示的宽度 height 128 音频的显示高度 hideScrollbar false 当出现横坐标的时候,设置是否显示 mediaType audio 音频的类型,支持video plugins [] 使用的插件 progressColor #555 光标后面的波形部分的填充颜色 waveColor #555 光标后面的波形的填充颜色 xhr {} 额外的请求XHR参数
实例演示:

this.wavesurfer = WaveSurfer.create({ container: "#wave", waveColor: "#368666", progressColor: "#6d9e8b", cursorColor: "#fff", height: 80, plugins: [RegionsPlugin.create()] });

2、方法调用


方法 说明 load(url) 加载音频 loadBlob(url) 从Bolb或者file对象中调用音频 play([start[, end]]) 从当前位置开始播放音频文件。结合使用start和end可以指定一个音频播放范围 playPause() 如果当前为状态状态开始播放,反之暂停播放 pause() 停止播放 stop() 停止播放并回到音频文件的起始处 empty() 清空waveform destroy() 销毁waveform,移除事件,元素和关联节点 getCurrentTime() 获取当前播放的进度,单位:秒 getDuration() 获取音频的总时长,单位:秒 getVolume() 获取音量 setVolume(v) 设置音量[0-1] skip(offset) 调到offset的位置 skipBackward() 倒退skipLength秒 skipForward() 前进skipLength秒 isPlaying() 判断音频是否在播放 on(eventName, callback) 绑定事件 un(eventName, callback) 解绑事件 unAll 绑定所有的事件
实例演示

// 音频加载 this.wavesurfer.load(audioUrl); // 获取总时长 let duration = parseInt(this.wavesurfer.getDuration()); // 停止播放并回到起始点 this.wavesurfer.stop();

3、事件绑定


使用on()和un()对事件进行绑定和解绑操作。

事件 说明 audioprocess 音频播放时触发 destroy 音频销毁时触发 error 音频出错时触发 finish 音频播放结束时触发 loading 音频加载时触发 ready 音频加载成功时触发 play 音频开始播放时触发 pause 音频暂停时触发 scroll 当有滚动条滚动的时候触发 volume 声音调整时触发 seek 鼠标点击某个位置的时候触发
实例演示:

// 加载时候 this.wavesurfer.on("loading", percents => { // 当前加载的进度 this.percent = percents; }); // 加载成功 this.wavesurfer.on("ready", () => { this.progress = false; }); // 播放中 this.wavesurfer.on("audioprocess", () => { this.currentTime = this.getCurrentTime(); }); // 结束播放 this.wavesurfer.on("finish", () => { this.wavesurfer.pause(); });

4、Regions插件


Regions用于音频播放器waveform视觉效果部分,可以用它来标注某个区域。Regions可以被拖拽和改变尺寸大小。

引入插件

import RegionsPlugin from "wavesurfer.js/dist/plugin/wavesurfer.regions.js";
插件定义

this.wavesurfer = WaveSurfer.create({ plugins: [RegionsPlugin.create()] });
Regions方法

方法 说明 addRegion(options) 在waveform中创建一个Region。返回一个Region对象 clearRegions() 移除所有的regions enableDragSelection(options) 可以通过选择来创建支持拖拽和改变大小的Regin
实例演示:

参数 默认值 说明 id region的id start 0 region的开始位置,单位秒 end 0 region的开始位置,单位秒 loop false 播放完毕后是否循环播放 drag true 是否支持拖拽 resize true 是否支持改变region的大小 color “rgba(0, 0, 0, 0.1)” region的颜色
this.currentRegion = this.wavesurfer.addRegion({ id: id, start: startTime, end: endTime, loop: false, drag: false, resize: false, color: "rgba(254, 255, 255, 0.4)" });
Regions的方法

方法 说明 play() 播放region playLoop() 循环播放region remove() 移除region
Regions事件

事件 说明 remove 在region被移除前触发 update 当region被更新时触发 click 当region点击时触发 dbclick 当region被双击时触发 over 当region被鼠标滑入时触发 leave 当在region上的鼠标离开时触发
// 更新起始时间 this.currentRegion.update({ start: newStartTime }); // 移除region this.currentRegion.remove();

js音频可视化插件Wavesurfer.js浏览器适配

  • 支持Chrome所有版本
  • 支持Firefox所有版本
  • 支持Safari所有版本
  • 支持IE10及以上版本

jQuery插件浏览器支持

查看更多

下载地址

下载地址一

转载必须注明来自:https://huajiakeji.com/jquery/37360.html

Volume Control - 音量控制

Volume Control - 音量控制

0 人评论 65126 次人浏览 3.0分 3.0 分
volume Control-音量控制插件是一个通过声音增强器增加音量,并且使用音频控件分别设置每个标签的音量级别的Chrome插件
适用于Chrome™的均衡器

适用于Chrome™的均衡器

0 人评论 15631 次人浏览 3.0分 3.0 分
适用于Chrome™的均衡器插件是一个伟大的,用户友好的工具,将帮助您改变声音。让您通过10频段均衡器调整频率分量之间的平衡,具有大量设置和出色的声音定制。
下一篇 : hpwm50al.dll下载
评论:(0)

已有 0 位网友发表了一针见血的评论,你还等什么?



为打击盗链困扰,本站已启用公众号人机验证
微信扫码关注公众号,发送"插件"二字获得验证码,验证码5分钟有效。

Chrome插件离线安装方法