html音频波纹播放器插件,Wavesurfer.js音频播放器插件的使用教程
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地址,可以参考: https://github.com/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里面开发.管网 https://aplayer.js.org/ 2.入手: 在 ...
HTML5 音频播放器-Javascript代码(短小精悍)
直接上干货咯! //HTML5 音频播放器 lzpong 2015/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/2015/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作用域详述(转载)
转载文章 转载文章 作者:骏马金龙 出处:http://www.cnblogs.com/f-ck-need-u/p/9925021.html Python作用域详述 作用域是指变量的生效范围,例如本地 ...
CF891C Envy
题面 题解 首先要知道两个性质: 对于任意权值,最小生成树上该权值的边数是相同的. 对于任意一个最小生成树,当加完所有权值小于一个任意值的边之后,当前图的连通性是一样的. 于是我们按照权值分开处理,对 ...
html音频波纹播放器插件,Wavesurfer.js音频播放器插件的使用教程相关推荐
- vue+elementUI使用Wavesurfer.js音频可视化
vue+elementUI使用Wavesurfer.js音频可视化 效果图 安装 wavesurfer.js npm install wavesurfer.js --save (datav安装) np ...
- react 原生html 插件,纯原生JS的瀑布流插件Macy.js,前端必备插件
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂 ...
- vue调用cordova 插件_Vue.js 使用cordova camera插件调取相机
本文给出在vue.js里如何使用cordova的插件完成调取相机及图库,并完成图片上传的操作. 具体的操作步骤如下 第一步:在cordova项目下安装cordova-plugin-camera插件 c ...
- html语音播放动画,html5 canvas+js音频可视化动画特效
html5 canvas+js实现的音频可视化动画特效,选择一首本地音频文件播放查看效果. 查看演示 下载资源: 13 次 下载资源 下载积分: 20 积分 js代码 window.onload = ...
- 【Eclipse提高开发速度-插件篇】安装VJET插件,JS等提示开发插件
1.安装Apache Batik CSS 一般安装VJET插件会出现 Cannot complete the install because one or more required items co ...
- vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
安装 wavesurfer.js cnpm i wavesurfer.js --save 无 cnpm 的先运行 npm i cnpm -g 全局安装 cnpm 绘制音频波形图 常用的配置参数详见注释 ...
- SkeyeWebPlayer.js H5播放器开发之webpack编译flv.js实现基础播放器功能(二)
SkeyeWebPlayer.js H5播放器是由成都视开信息科技开发和维护的一个完善的RTSP.FLV.HLS等多种流媒体协议播放,视频编码支持H.264,H.265,音频支持AAC,支持TCP/U ...
- Gulp简介、gulp基本使用步骤、gulp-cli工具、gulpfile.js文件、gulp插件
Gulp介绍: gulp概念: 基于node开发的前端构建工具模块,将前端机械化的操作编写成任务自动化操作,类似于webpack构建,可以完成代码压缩.语法转换.抽离公共文件.自动实现浏览器刷新等. ...
- 帮助用户更好的体验网站:jQuery的页面功能向导插件Pageguide.js
为什么80%的码农都做不了架构师?>>> 日期:2012-6-15 来源:GBin1.com 在线演示 本地下载 大家可能都有过这样的开发经验,用户无法真正的了解如何使用一 ...
- html js 循环提示框,纯js超酷消息提示框插件notice.js
notice.js是一款纯js超酷消息提示框插件.notice.js为纯js编写,没有任何依赖文件.通过它可以在页面上制作出漂亮的toast消息通知框效果.该js消息提示框插件的特点还有: 支持4中情 ...
最新文章
- 癌细胞“绑架”神经元帮自己壮大,科学家破译癌细胞分子机制 | 最新Nature封面...
- linux内核模块的强制删除-结束rmmod这类disk sleep进程
- 第22届清华大学电子设计大赛决赛
- 算法练习----java字符全排列
- virtualbox网络相关
- linux shell 字符串 文件内容 大小写 转换 替换
- maven 发布到仓库
- 4源代码的下载和编译
- oracle用户名密码过期引起的网站后台无法登录
- php冒泡程序讲解,PHP冒泡排序程序代码与源代码
- Chrome的两个工具
- 190109每日一句
- 信息论实验一:信源熵的计算
- Android NDK 建立cocos2dx项目
- 【服务器数据恢复】EMC Isilon存储误删除的数据恢复案例
- java同花顺判定_笔试题:随机抽取五张牌 判断是否为同花顺
- 【无标题】C语言编写一个简单答题系统
- 第六章、坐标轴的定制
- CAN-TP(15765-2协议)网络层协议解析
- CC2530入网流程