JS 音频可视化插件Wavesurfer.js的使用教程


Posted in Javascript onOctober 31, 2018

Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件,本文主要记录它及其视觉效果插件Regions插件的使用方法。

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();

更多方法请看官网:wavesurfer官网

总结

以上所述是小编给大家介绍的JS 音频可视化插件Wavesurfer.js的使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
jquery使整个div区域可以点击的方法
Jun 24 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
TypeScript 内置高级类型编程示例
Sep 23 Javascript
微信小程序实现留言板
Oct 31 #Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 #Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 #Javascript
微信小程序实现留言功能
Oct 31 #Javascript
微信小程序签到功能
Oct 31 #Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 #Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 #Javascript
You might like
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
js 单引号 传递方法
2009/06/22 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
AngularJS快速入门
2015/04/02 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
python实现梯度下降算法
2020/03/24 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
团员的自我评价
2013/12/01 职场文书
化学实验员岗位职责
2013/12/28 职场文书
安全承诺书格式范本
2015/04/28 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
golang语言指针操作
2022/04/14 Golang