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

这篇文章发布于 2018年12月9日,星期日,23:40,归类于 JS实例。 阅读 40859 次, 今日 5 次 26 条评论

 

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

能!

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

波形图

二、了解wavesurfer.js

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

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

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

三、显示声音波形图

  1. 引入JS:
    <script src="https://unpkg.com/wavesurfer.js"></script>

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

  2. 写入一个<div>容器,用来呈现波形图,例如:
    <div id="waveform"></div>
  3. 使用全局的WaveSurfer对象创建一个实例:
    var wavesurfer = WaveSurfer.create({
        container: '#waveform'
    });
  4. 用创建的wavesurfer去加载我们的音频资源,可以是本地mp3:
    wavesurfer.load('../audio/zxx.mp3');

    也可以是在线地址:

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

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

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

    默认的波形图UI

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

    播放后的波形效果截图

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

    更多方法可以参见文档

实例demo在哪里?

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

demo中的音频是本人亲自献声,写到这里,忍不住撸了撸自己帅气的头发,机会难得,大家不妨进去听一听我都说了啥~

demo页面效果截图

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加了个隐蔽的很坏的处理,特定场景下才会触发的一个新开标签页行为,具体细节我就不透露了。

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

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

(本篇完)

分享到:


发表评论(目前26 条评论)

  1. 青蓝说道:

    大佬好,缩放wavesurfer,声波图 waveform 缩放了,频谱图 spectrogram却没有缩放,大佬了解吗

  2. yy说道:

    你好 为什么图形加载的好慢呀 本地 还快一点 放外网上 加载特别慢 访问的是静态资源 如果是访问 url 也加载不出来

  3. 波形图说道:

    生成这种可以用二维码扫描吗

  4. xpress2000说道:

    无法显示啊,请问怎么回事?官方和你的方法都不行。

    var wavesurfer = WaveSurfer.create({
    container: ‘#waveform’,
    waveColor: ‘violet’,
    progressColor: ‘purple’});
    wavesurfer.load(‘assets/Nce1-001.mp3’);

  5. shengbaiji说道:

    完全不行啊。不知道为什么,波形图就是不显示,空白一片。 放本地和服务器都不行。 官方的方法,和这个方法,全部一样,空白的。

  6. 跨域说道:

    使用wavesurfer.js报canvas跨域如何解决

  7. 音频路径说道:

    为什么我不能加载本地音频啊
    wavesurfer.js:6 Access to XMLHttpRequest at ‘file:///C:/eclipsejava%E5%BC%80%E5%8F%91%E5%AE%89%E8%A3%85%E5%8C%85apache-tomcat-8.0.9webappspadExamaudioq4.mp3’ from origin ‘http://localhost:8083’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

  8. yanhua说道:

    大佬

  9. 小胡说道:

    有那种边播放边显示波形图那样的功能吗?

  10. 孤城说道:

    老哥,为什么我的显示不出来波形图?连按钮的样式都没有

  11. 誓约说道:

    大佬啥时候换一下 博客ui界面😂😂😂 在线催更

  12. 欧耶说道:

    外链js加上广告,估计能收不少

  13. gakki说道:

    亲自献声还行 ~

  14. 墨轩momo说道:

    噗,9G的txt~外链的问题,可以在服务器限制的啦,非本网站调用不了资源~

  15. 逆袭哥说道:

    路过帮顶 写的不错!

  16. 慢慢说道:

    敢不敢说清楚点儿

  17. 网友233说道:

    社会人,不敢不敢!

  18. LSZH说道:

    想起以前你好像遇到过一个广告插件恶意注入 iframe随机跳转网站的事情

  19. Vtrois说道:

    总之,钱不能丢就对了