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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
javascript Base类 包含基本的方法
Jul 22 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
js实现的奥运倒计时时钟效果代码
Dec 09 Javascript
深入理解js数组的sort排序
May 28 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
jquery事件与绑定事件
Mar 16 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
js实现右键弹出自定义菜单
Sep 08 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
星际流派综述
2020/03/04 星际争霸
如何使用PHP获取网络上文件
2006/10/09 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
angular4自定义组件详解
2017/09/28 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
Python 调用PIL库失败的解决方法
2019/01/08 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
Python列表切片常用操作实例解析
2019/12/16 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
Django+boostrap 美化admin后台的操作
2020/03/11 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
python实现定时发送邮件
2020/12/23 Python
python爬取抖音视频的实例分析
2021/01/19 Python
戴尔美国官网:Dell
2016/08/31 全球购物
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
皮肤科医师岗位职责
2013/12/04 职场文书
口头翻译求职人自荐信
2013/12/07 职场文书
六查六看心得体会
2014/10/14 职场文书
Python pandas求方差和标准差的方法实例
2021/08/04 Python
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL
使用Java去实现超市会员管理系统
2022/03/18 Java/Android
mysql sql常用语句大全
2022/06/21 MySQL