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 相关文章推荐
JavaScript 动态生成方法的例子
Jul 22 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
JS实现div居中示例
Apr 17 Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
python中时间模块的基本使用教程
2019/05/14 Python
深入了解Django中间件及其方法
2019/07/26 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
python实现图片横向和纵向拼接
2020/03/05 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
keras 多任务多loss实例
2020/06/22 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
金融行业务员的自我评价
2013/12/13 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
个人委托书
2014/07/31 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
JS 基本概念详细介绍
2021/10/16 Javascript