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.min.js";
插件定义
this.wavesurfer = WaveSurfer.create({
plugins: [RegionsPlugin.create()]
});
Regions方法
方法
说明
addRegion(options)
在waveform中创建一个Region。返回一个Region对象
clearRegions()
移除所有的regions
enableDragSelection(options)
可以通过选择来创建支持拖拽和改变大小的Regin
Regions的options
参数
默认值
说明
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();
js插件---10个免费开源的JS音乐播放器插件
js插件---10个免费开源的JS音乐播放器插件 一.总结 一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...
10个免费开源的JS音乐播放器插件
点这里 音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些 网页播放器 插件比较少见,所以这里为大家整理一个集合,也许会有用到的时候. 下面整理的播放器有些是支持自适应的, ...
基于canvas和Web Audio的音频播放器
wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件.通过wavesurfer.js你能够使用它来制作各种HTML5音频播放器,它能够在各种支持 Web A ...
【jquery】一款不错的音频播放器——Amazing Audio Player
前段时间分享了一款视频播放器,点击这里.今天介绍一款不错的音频播放器——Amazing Audio Player. 介绍: Amazing Audio Player是一个使用很方便的 Windows ...
小型音乐播放器插件APlayer.js的简单使用例子
本篇博客将会给出一个小型音乐播放器插件APlayer.js的使用例子.关于APlayer.js的具体介绍和Github地址,可以参考: /MoePlayer/A ...
使用EasyNVR无插件流媒体服务器接口和EasyPlayer.js播放器插件实现web网页H5播放无插件
1.背景需求 很多客户在使用EasyNVR无插件流媒体服务器时,不喜欢产品化的界面,有时可能满足不了日常观看使用的需求.因此软件提供丰富的HTTP接口,供第三方平台调用集成.但是有时客户这边可能没有专 ...
(原创)jQuery Media Plugin-jQuery的网页媒体播放器插件的使用心得
jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件,它支持大部分的网络多媒体播放器和多媒体格式,比如:Flash, Windows Media Player, Real ...
Asp.Net MVC中Aplayer.js音乐播放器的使用
1.前言: Aplater.js是一款可爱.漂亮的Js音乐播放器,以前就了解过也弄过一些,现在就用mp3的格式来在.Net里面开发.管网/ 2.入手: 在 ...
HTML5 音频播放器-Javascript代码(短小精悍)
直接上干货咯! //HTML5 音频播放器 lzpong /01/19 var wavPlayer = function () { if(window.parent.wavPlayer) re ...
随机推荐
for循环与for in,$('').each 与$.each的区别
一:for循环与for in的区别 for...in 语句用于对数组或者对象的属性进行循环操作. 语法: for(变量in对象){在此执行代码} for循环是对数组的元素进行循环,而不能 ...
iOS - 用 UIBezierPath 实现果冻效果
最近在网上看到一个很酷的下拉刷新效果(http://iostuts.io//10/17/elastic-bounce-using-uibezierpath-and-pan-gesture/). ...
TI的AM3359的sd卡分区以及sd卡启动说明
[1]sd 卡分区: ti提供了自己的分区shell脚本create-sdcard.sh 脚本目录在:ti-sdk-am335x-evm-05.06.00.00/bin/ (1)插入sd卡(若是笔记 ...
crontab 定时任务格式
如下内容节选自 用crontab -e 添加要执行的命令 添加的命令必须以如下格式: * * * * * /command path 前五 ...
PHP - PDO 之 mysql 事务功能
总结C语言在嵌入式开发中应用的知识点(文件数据的加密与解密)
Python3基础-Python作用域详述(转载)
转载文章 转载文章 作者:骏马金龙 出处:/f-ck-need-u/p/9925021.html Python作用域详述 作用域是指变量的生效范围,例如本地 ...
CF891C Envy
题面 题解 首先要知道两个性质: 对于任意权值,最小生成树上该权值的边数是相同的. 对于任意一个最小生成树,当加完所有权值小于一个任意值的边之后,当前图的连通性是一样的. 于是我们按照权值分开处理,对 ...
如果觉得《html音频波纹播放器插件 Wavesurfer.js音频播放器插件的使用教程》对你有帮助,请点赞、收藏,并留下你的观点哦!