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 tools系列 expose 学习
Sep 06 Javascript
JavaScript 滚轮事件使用说明
Mar 07 Javascript
JavaScript 构造函数 面相对象学习必备知识
Jun 09 Javascript
js对象的比较
Feb 26 Javascript
浅谈javascript回调函数
Dec 07 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
如何用JS判断两个数字的大小
Jul 21 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
浅谈Vue的响应式原理
May 30 Javascript
vue实现移动端拖动排序
Aug 21 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 MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
php实现评论回复删除功能
2017/05/23 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
Python中获取对象信息的方法
2015/04/27 Python
python实用代码片段收集贴
2015/06/03 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
python设置环境变量的原因和方法
2019/06/24 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
大学生最常用的自我评价
2013/12/07 职场文书
安全横幅标语
2014/06/09 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
求职自我评价怎么写
2015/03/09 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
教师师德工作总结2015
2015/07/22 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
Python 全局空间和局部空间
2022/04/06 Python