HTML5 可视化频谱效果
如今的HTML5技术正让网页变得越来越强大,通过其Canvas
标签与AudioContext
对象可以轻松实现之前在Flash或Native App中才能实现的频谱指示器的功能。
Demo: Cyandev Works - HTML5 Audio Visualizing
开始使用AudioContext
The
AudioContext
interface represents an audio-processing graph built from audio modules linked together, each represented by anAudioNode
.
根据MDN的文档,AudioContext
是一个专门用于音频处理的接口,并且工作原理是将AudioContext
创建出来的各种节点(AudioNode
)相互连接,音频数据流经这些节点并作出相应处理。
创建AudioContext对象
由于浏览器兼容性问题,我们需要为不同浏览器配置AudioContext
,在这里我们可以用下面这个表达式来统一对AudioContext
的访问。
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContext(); //实例化AudioContext对象
附. 浏览器兼容性
浏览器 Chrome Firefox IE Opera Safari 支持版本 10.0 25.0 不支持 15.0 6.0
当然,如果浏览器不支持的话,我们也没有办法,用IE的人们我想也不需要这些效果。但最佳实践是使用的时候判断一下上面声明的变量是否为空,然后再做其他操作。
解码音频文件
读取到的音频文件是二进制类型,我们需要让AudioContext
先对其解码,然后再进行后续操作。
audioContext.decodeAudioData(binary, function(buffer) {
... });
方法decodeAudioData
被调用后,浏览器将开始解码音频文件,这需要一定时间,我们应该让用户知道浏览器正在解码,解码成功后会调用传进去的回调函数,decodeAudioData
还有第三个可选参数是在解码失败时调用的,我们这里就先不实现了。
创建音频处理节点
这是最关键的一步,我们需要两个音频节点:
AudioBufferSourceNode
AnalyserNode
前者是用于播放解码出来的buffer的节点,而后者是用于分析音频频谱的节点,两个节点顺次连接就能完成我们的工作。
创建AudioBufferSourceNode
var audioBufferSourceNode;
audioBufferSourceNode = audioContext.createBufferSource();
创建AnalyserNode
var analyser;
analyser = audioContext.createAnalyser();
analyser.fftSize = 256;
上面的fftSize
是用于确定FFT大小的属性,那FFT是什么高三的博主还不知道,其实也不需要知道,总之最后获取到的数组长度应该是fftSize
值的一半,还应该保证它是以2为底的幂。
连接节点
audioBufferSourceNode.connect(analyser);
analyser.connect(audioContext.destination);
上面的audioContext.destination
是音频要最终输出的目标,我们可以把它理解为声卡。所以所有节点中的最后一个节点应该再连接到audioContext.destination
才能听到声音。
播放音频
所有工作就绪,在解码完毕时调用的回调函数中我们就可以开始播放了。
audioBufferSourceNode.buffer = buffer; //回调函数传入的参数
audioBufferSourceNode.start(0); //部分浏览器是noteOn()函数,用法相同
参数代表播放起点,我们这里设置为0意味着从头播放。
文件读取
HTML5支持文件选择、读取的特性,我们利用这个特性可以实现不上传,即播放的功能。
HTML标签
在你的页面中找个位置插入:
<input id="fileChooser" type="file" />