声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！
一转眼就已经有三个月没写博客了，毕业季事情确实多，现在也终于完全毕业了，博客还是不能落下。偶尔还是要写一下。
玩HTML5的Audio API是因为之前看到博客园里有关于这个的博客，觉得挺好玩的，所以就学习了一下。本文仅作为自己的学习记录。如有错误之处请指出。
最终的效果也就如右图，园友们可以自己去玩一下
DEMO链接：请戳我！！！ 可以选择本地音频文件进行播放，也可以听楼主的音乐哈
同时，这个API目前浏览器支持度不高，PC浏览器支持较好的仅firefox、chrome以及safari，移动端就更少的，android5.0才支持，safari是6.1以上版本支持。
因此，若要用于生产环境，请自行斟酌。
WebAudio从获取数据到播放整个流程可以用一张图解释：
有点像nodejs里的pipe流式传输，input是Audio的输入节点，可以为buffer，也可以为audio对象。Effects为各个操控音频的节点，我自己用到的就只有GainNode以及AnalyserNode，GainNode可以用来控制音频音量的大小，默认值为0，也就是静音，如果设为1才有声音，如果设的更高的值，就会更高音。而AnalyserNode是用来获取音频大小的数值。
还有其他很多节点，其他节点的话个人感觉是一些比较高级的音频处理，我是不知道怎么用，有兴趣的可以自行去mdn上查询。
回归正题：说下该效果改如何实现，首先，要做成这种效果，要分几步：
1、获取音频文件，实例化一个音频容器对象。
2、通过FileReader把音频文件转成ArrayBuffer后再对其进行解码。
3、用解码后的buffer实例化一个AudioBuffer对象。
4、使用AnalyserNode接口实例化一个分析器节点。
5、使用connect方法将AudioBuffer对象连接至AnalyserNode，如果想用GainNode，就再用connect方法，把AnalyserNode跟GainNode连接，然后再接到最终的音频播放节点：Destination，开始播放音频
6、在音频播放的时候通过AnalyserNode获取音频播放时的各个频率值并转成8bit的ArrayBuffer。
7、根据上面的arraybuffer里的各个值在canvas上画出相应的条形图即可。
大概说起来就以上几步，具体代码分析如下：
先将要用到的对象先定义好：其中包括audioContext音频容器对象，以及canvas的2d绘图环境对象，requestAnimationFrame的兼容性写法。
var music = document.getElementById("music"),canvas = document.getElementById("cas"),ctx=canvas.getContext("2d");
window.AudioContext= window.AudioContext||window.webkitAudioContext||window.mozAudioContext;
window.RAF = (function(){
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60); };
})();
var AC = new AudioContext();
然后就获取音频文件，可以直接通过input file来获取，或者用xhr也行。楼主为了方便，做的demo上就是直接用input file来获取音频文件。代码如下：通过onchange事件来获取到音频文件music.file[0]。再对音频文件进行解码，也就是changeBuffer方法要做的事。
music.onchange = function(){
if(music.files.length!==0){
changeBuffer(music.files[0]);
}
}
获取到了音频文件，先用FilreReader将文件转成ArrayBuffer对象，在加载完后可以通过e.target.result获取到文件内容。
然后再对文件内容进行解码，用到的就是audioContext对象里的decodeAudioData方法。根据官方API文档得知，该方法有三个参数：第一个是就是音频ArrayBuffer对象，第二个是成功解码完毕后的回调，第三个是解码失败后的回调
function changeBuffer(file){
var fr = new FileReader();
fr.onload = function(e){
var fileResult = e.target.result;
AC.decodeAudioData(fileResult , function(buffer){
playMusic(buffer)
}, function(e){
console.log(e)
alert("文件解码失败")
})
}
fr.readAsArrayBuffer(file);
}
解码成功后调用playMusic方法，并且传入解码后的buffer数据，此时实例化一个AudioBufferSource对象，AudioBufferSource对象的属性有五个。分别是：buffer、playbackRate、loop、loopstart和loopend，buffer自然就是音频buffer数据，playbackRate是渲染音频流的速度，其默认值是1。loop则是播放循环属性，默认为false，如果设为true则会循环播放音频。loopstart和loopend则是循环开始和结束的时间段，以秒为单位，默认值均为0，只有当loop的值为true的时候这两个属性才会起效。
下面的playMusic方法不仅处理了buffer的播放，如果传入的是audio dom对象也会进行相应的转换。但是注意，如果是audio对象转出来的audioSource，就不会有上面AudioBufferSource的方法，毕竟audio dom对象本身有方法可以控制自己的播放。
实例化AudioBufferSource对象后，就像上面说的一样，接入analyserNode，analyserNode再接入gainnode，然后最终gainnode再接入audioContext.destination。
准备完毕后，如果源是bufferSource则调用start方法播放音频，否则就是用audio 的play方法播放音频。
播放后就跳转到canvas的绘图方法animate中，将音谱绘制出来。
//音频播放
function playMusic(arg) {
var source;
//如果arg是audio的dom对象，则转为相应的源
if (arg.nodeType) {
audioSource = audioSource || AC.createMediaElementSource(arg);
source = audioSource;
} else {
bufferSource = AC.createBufferSource(); bufferSource.buffer = arg; bufferSource.onended = function () {
app.trigger(singleLoop ? nowIndex : (nowIndex + ));
}; //播放音频
setTimeout(function () {
bufferSource.start()
}, ); source = bufferSource;
} //连接analyserNode
source.connect(analyser); //再连接到gainNode
analyser.connect(gainnode); //最终输出到音频播放器
gainnode.connect(AC.destination);
}
然后获取到analyser节点里的频率长度，根据长度实例化一个8位整型数组，通过analyser.getByteFrequencyData将analyser节点中的频率数据拷贝进数组。因为数组为8位数组，即每个值的大小就为0~256，然后就可以根据这个值即各个频率的信号量进行绘制不同的条形图，每个条形图我也抽象成了对象，在每一帧对各个条形图进行修改就完成了最简单的音频动画了。
条形图对象代码：
//音谱条对象
function Retangle(w, h, x, y) {
this.w = w;
this.h = h; //小红块高度
this.x = x;
this.y = y;
this.jg = 3;
this.power = 0;
this.dy = y; //小红块位置
this.initY = y;
this.num = 0;
}; var Rp = Retangle.prototype; Rp.update = function(power){
this.power = power;
this.num = ~~(this.power / this.h + 0.5); //更新小红块的位置，如果音频条长度高于红块位置，则红块位置则为音频条高度，否则让小红块下降
var nh = this.dy + this.h;//小红块当前位置
if (this.power >= this.y - nh) {
this.dy = this.y - this.power - this.h - (this.power == 0 ? 0 : 1);
} else if (nh > this.y) {
this.dy = this.y - this.h;
} else {
this.dy += 1;
} this.draw();
}; Rp.draw = function(){
ctx.fillStyle = grd;
var h = (~~(this.power / (this.h + this.jg))) * (this.h + this.jg);
ctx.fillRect(this.x, this.y - h, this.w, h)
for (var i = 0; i < this.num; i++) {
var y = this.y - i * (this.h + this.jg);
ctx.clearRect(this.x - 1, y, this.w + 2, this.jg);
}
ctx.fillStyle = "#950000";
ctx.fillRect(this.x, ~~this.dy, this.w, this.h);
};
循环动画方法：
function animate() {
if(!musics[nowIndex].decoding){
ctx.clearRect(0, 0, canvas.width, canvas.height);
//出来的数组为8bit整型数组，即值为0~256，整个数组长度为1024，即会有1024个频率，只需要取部分进行显示
var array_length = analyser.frequencyBinCount;
var array = new Uint8Array(array_length);
analyser.getByteFrequencyData(array); //将音频节点的数据拷贝到Uin8Array中
//数组长度与画布宽度比例
var bili = array_length / canvas.width;
for (var i = 0; i < rt_array.length; i++) {
var rt = rt_array[i];
//根据比例计算应该获取第几个频率值，并且缓存起来减少计算
rt.index = ('index' in rt) ? rt.index : ~~(rt.x * bili);
rt.update(array[rt.index]);
}
copy();
}else {
showTxt("音频解码中...")
}
RAF(animate);
}
为了让整个条形图更美观，所以还加入了一个半透明投影效果：
//制造半透明投影
function copy() {
var outctx = outcanvas.getContext("2d");
var imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height / 2);
for (var i = 0; i < imgdata.data.length; i += 4) {
imgdata.data[i + 3] = 30;
}
outctx.putImageData(imgdata, 0, 0);
ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(Math.PI);
ctx.scale(-1, 1);
ctx.drawImage(outcanvas, -canvas.width / 2, -canvas.height / 2)
ctx.restore();
}
后期对代码有所更改，若要最新源码请见github地址：
https://github.com/whxaxes/canvas-test/blob/gh-pages/src/Funny-demo/musicPlayer/