未加星标

使用wavesurfer.js显示mp3 audio音频的波形图

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8290

本文可全文转载,个人网站无需授权,只要保留原作者、出处以及文中链接即可,任何网站均可摘要聚合,商用请联系授权。

一、能不能开头不要废话?

能!

如果你想实现下图所示的波形图效果,可以借助wavesurfer.js。


使用wavesurfer.js显示mp3 audio音频的波形图
二、了解wavesurfer.js

wavesurfer.js项目地址: https://github.com/katspaugh/wavesurfer.js

官网地址: http://wavesurfer-js.org/

要想实现一个音频的波形效果,很简单,按照下面的步骤来就好了!

三、显示声音波形图

引入JS:

<script src="https://unpkg.com/wavesurfer.js"></script>

如果是学习测试,可以用上面的在线地址;如果是实际开发,请下载到本地。

写入一个 <div> 容器,用来呈现波形图,例如: <div id="waveform"></div> 使用全局的 WaveSurfer 对象创建一个实例: var wavesurfer = WaveSurfer.create({
container: '#waveform'
}); 用创建的 wavesurfer

去加载我们的音频资源,可以是本地mp3:

wavesurfer.load('../audio/zxx.mp3');

也可以是在线地址:

wavesurfer.load('//image.zhangxinxu.com/audio/zxx.mp3');

如果在线地址,且跨域的话,记得服务器侧设置CORS headers,否则安全限制,mp3音频资源无法解析。

此时,波形图就有了,默认颜色和样式如下:


使用wavesurfer.js显示mp3 audio音频的波形图

最左侧的黑线是当前播放的进度位置线。例如,我们播放一段音频,则会下图这样:


使用wavesurfer.js显示mp3 audio音频的波形图
我们还可以外加一个播放和暂停按钮,控制音频和波形图的播放和停止,方法如下: wavesurfer.play();
wavesurfer.pause();

更多方法可以参见 文档 。

实例demo在哪里?

在这里!您可以狠狠地点击这里: 使用JS显示Mp3音频的波形图demo

demo中的音频是本人亲自献声,写到这里,忍不住撸了撸自己帅气的头发,机会难得,大家不妨进去听一听我都说了啥~
使用wavesurfer.js显示mp3 audio音频的波形图
使用wavesurfer.js显示mp3 audio音频的波形图

demo页面HTML如下:

<div id="waveform" class="waveform"></div>
<a href="javascript:" id="btnPlay" role="button">播放</a>
<a href="javascript:" id="btnPause" role="button">暂停</a>

JS代码如下:

var wavesurfer = WaveSurfer.create({
container: '#waveform'
});
wavesurfer.load('./zxx-comic-01.mp3');
// 播放和暂停
btnPlay.addEventListener('click', function () {
wavesurfer.play();
});
btnPause.addEventListener('click', function () {
wavesurfer.pause();
});

就是这么简单。

四、想要更复杂的交互显示?

没问题。

wavesurfer有多达35个 可选参数 ,什么音频速率控制,波形图大小尺寸啊,都完全不在话下。

还有好多种方法,对了,还有很多其他的插件,丰富的使用案例。

基本上,你要想对音频进行解析,显示个图形啥的,不要多想了,就wavesurfer,童叟无欺,老少皆宜,居家旅行,开发必备。

自己去探索吧,我就不远送了!

五、结束说点啥没关系吧

网站换独立云后,越来越慢,看访问统计没多少增加呀~

于是今天打算看看日志。

嘛呀,我一看日志文件,9个多G,整个人都斯巴达了,读写一个9个多G的txt,再怎么样,也会越来越慢的呀。而且这么大,根本看不了日志。

所以,就吭哧吭哧改成每天一个独立的日志文件。

谁知才改好没多久,日志文件已经有10M多了,我这一琢磨,不对呀,这周末顶多几千人过来看看文章,怎么会有这么多请求呢?

我就一分析,整个人都斯巴达了,怎么有这么多外站直接请求我网站的JS呢,我做demo写插件给大家用,不是让大家直接链接JS文件的呀~

为了让大家意识到链接外部网站的一个JS文件是多么危险的事情。

嘿嘿,我给几个调用比较频繁的JS加了个隐蔽的很坏的处理,特定场景下才会触发的一个新开标签页行为,具体细节我就不透露了。
使用wavesurfer.js显示mp3 audio音频的波形图

总之,大家以后开发上线,一定不要外链外部的JS资源,用户信息泄露是小,财产损失那可就不好玩了。

好,就说这么多,拜拜,下篇文章再见!


使用wavesurfer.js显示mp3 audio音频的波形图

本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。

本文地址: https://www.zhangxinxu.com/wordpress/?p=8290

(本篇完)

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:使用wavesurfer.js显示mp3 audio音频的波形图
本站链接:https://www.codesec.net/view/621011.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(44)