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 相关文章推荐
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
javascript实现动态改变层大小的方法
May 14 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
Angular.JS中指令ng-if的注意事项小结
Jun 21 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 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
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
php jsonp单引号转义
2014/11/23 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
监控 url fragment变化的js代码
2010/04/19 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
jQuery中slidedown与slideup方法用法示例
2016/09/16 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
Python迭代和迭代器详解
2016/11/10 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
南威尔士家居商店:Leekes
2016/10/25 全球购物
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
巴西本土电商平台:Americanas
2020/06/21 全球购物
西门豹教学反思
2014/02/04 职场文书
辩论赛主持词
2014/03/18 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL