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 相关文章推荐
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
GOJS+VUE实现流程图效果
Dec 01 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
Dec 03 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
Apr 29 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 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
我的论坛源代码(一)
2006/10/09 PHP
一个简单计数器的源代码
2006/10/09 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
python引用DLL文件的方法
2015/05/11 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
Python 如何批量更新已安装的库
2020/05/26 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
应届毕业生如何写求职信
2014/02/16 职场文书
自我推荐信格式模板
2015/03/24 职场文书
英文慰问信范文
2015/03/24 职场文书
担保书格式范文
2015/09/22 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript
Golang 字符串的常见操作
2022/04/19 Golang
Python代码实现双链表
2022/05/25 Python