byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8290
一, 能不能开头不要废话?
能!
如果你想实现下图所示的波形图效果, 可以借助 wavesurfer.JS.
二, 了解 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.play();
- wavesurfer.pause();
更多方法可以参见 文档 http://wavesurfer-js.org/docs/events.html .
实例 demo 在哪里?
在这里! 您可以狠狠地点击这里: 使用 JS 显示 Mp3 音频的波形图 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 个 可选参数 http://wavesurfer-js.org/docs/options.html , 什么音频速率控制, 波形图大小尺寸啊, 都完全不在话下.
还有好多种方法, 对了, 还有很多其他的插件, 丰富的使用案例.
基本上, 你要想对音频进行解析, 显示个图形啥的, 不要多想了, 就 wavesurfer, 童叟无欺, 老少皆宜, 居家旅行, 开发必备.
自己去探索吧, 我就不远送了!
五, 结束说点啥没关系吧
网站换独立云后, 越来越慢, 看访问统计没多少增加呀~
于是今天打算看看日志.
嘛呀, 我一看日志文件, 9 个多 G, 整个人都斯巴达了, 读写一个 9 个多 G 的 txt, 再怎么样, 也会越来越慢的呀. 而且这么大, 根本看不了日志.
所以, 就吭哧吭哧改成每天一个独立的日志文件.
谁知才改好没多久, 日志文件已经有 10M 多了, 我这一琢磨, 不对呀, 这周末顶多几千人过来看看文章, 怎么会有这么多请求呢?
我就一分析, 整个人都斯巴达了, 怎么有这么多外站直接请求我网站的 JS 呢, 我做 demo 写插件给大家用, 不是让大家直接链接 JS 文件的呀~
为了让大家意识到链接外部网站的一个 JS 文件是多么危险的事情.
嘿嘿, 我给几个调用比较频繁的 JS 加了个隐蔽的很坏的处理, 特定场景下才会触发的一个新开标签页行为, 具体细节我就不透露了.
总之, 大家以后开发上线, 一定不要外链外部的 JS 资源, 用户信息泄露是小, 财产损失那可就不好玩了.
好, 就说这么多, 拜拜, 下篇文章再见!
来源: http://www.tuicool.com/articles/RRfE7zr