使用Web Audio API可以對音頻進行分析和操作，最終實現一個音頻可視化程序。
最終效果請戳這里;
完整版代碼請戳這里，如果還看得過眼，請給一個start⭐️
一、API###
-
AudioContext: 該接口表示由音頻模塊鏈接而成的一個音頻上處理下文，類似於canvas里面getContext(2d)返回的對象，對音頻的一切 操作都在這個環境里進行；它包含各個AudioNode對象以及他們相關聯的對象，創建方法如下：
var ac = new window.AudioContect(); -
AudioNode:音頻節點，是一個音頻處理模塊，它包括GainNode(音量控制器)、BiquadFilterNode(濾波器)等； -
AudioContext的屬性：AudioContext.currentTime:AudioContext從創建開始到當前的時間，單位秒，是一個只讀屬性，不可對其進行操作；AudioContext.destination:返回AudioDestinationNode對象，所有音頻輸出的聚集地，所有的AudioNode都直接或間接地鏈接到這里；AudioContext.state:返回AudioContext的當前狀態；
-
AudioContext的方法：-
AudioContext.close():關閉音頻環境，釋放正在使用的音頻資源； -
AudioContext.createBuffer():創建一個空的AudioBuffer對象，並能通過AudioBufferSourceNode來進行數據填充和播放；AudioBuffer可以通過AudioContect.createBuffer方法創建或使用Audio -
AudioContext.createBufferSource():創建一個空的AudioBufferSourceNode對象，並能通過AudioBuffer來進行數據填充和播放； -
AudioCount.createAnalyser()：創建一個AnalyserNode,他可以用來顯示音頻時間和頻率的數據。 -
AudioContext.decodeAudioData(arrayBuffer,succ(buffer),err):從ArrayBuffer對象中異步解碼音頻文件，這個ArrayBuffer對象通常是通過使用responseType為arraybuffer類型的XMLHttpRequest方法來獲取.接受三個參數，第一個是AudioData數據，第二個是解碼成功的回調函數，第三個是失敗的回調函數。 -
createGain()/createGainNode():創建GainNode對象，通過改變其value的值可以改變音頻音量，創建方法：
var gainNode = ac.createGain() || ac.createGainNode();
-
-
AudioBufferSourceNode:表示內存中的一段音頻資源，其音頻數據存儲於AudioBuffer中(buffer屬性中)，創建方式：
var buffersource = ac.createBufferSource();此對象有3個常用的屬性：
1).buffer:AudioBuffer對象，表示要播放的音頻資源數據。他有一個子屬性：duration，該音資源的時長，單位秒；
2).loop:是否循環播放，默認是false；
3).onended:綁定音頻播放完畢時調用的實踐處理程序；
常用的方法：
- start/noteOn(when=ac.currentTime,offset=0,duration=buffer.duration-offset),開始播放音頻。其中，when：何時開始播放；offset:從音頻的第幾秒開始播放；duration:播放幾秒;
- stop/noteOff(when=ac.currentTime):結束播放；
二、播放一個音頻###
通過xhr 獲取到arrayBuffer類型的音頻資源，用audioContext對象的decodeAudioData方法將arrayBuffer類型解析為buffer類型，用audioContext對象的createBufferSource()方法創建一個bufferSource對象，將剛才解析的buffer 數據復制給bufferSource對象的buffer屬性，bufferSource對象用contect()方法鏈接audioContext對象的 destination 屬性，最后調用bufferSource對象的“start/noteOn”方法播放音頻。
實例代碼：
//獲取到arrayBuffer類型的音頻資源
var xhr = new XMLHttpRequest();
function getMusic(name){
xhr.abort();
xhr.open("get","media/"+name); // 文件位於media文件夾下，要獲取的音頻文件名為 name
xhr.responseType = "arraybuffer"; //返回類型設置為
xhr.onload = function(){
console.log(xhr.response); //ArrayBuffer 類型的返回數據
};
xhr.send();
}
//用decodeAudioData方法將arrayBuffer類型解析為buffer類型
var ac = new window.AudioContext();
//接上例
xhr.onload = function(){
ac.decodeAudioData(xhr.response,function(buffer){
var bufferSource = ac.createBufferSource();
bufferSource.buffer = buffer;
bufferSource.connect(ac.destination);
bufferSource[bufferSource.start ? "start" : "noteOn"](0); //播放
},function(err){
console.log(err)
})
};
實現對音量的控制：
改變音量要用到gainNode對象，用gainNode對象鏈接到destination對象，然后讓bufferSource對象鏈接到gainNode對象，對音量的控制，是對gainNode對象的gain.value 對象的改變達到的效果。
//音量控制元素
<input type="range" id="volume" mix="0" max="100" value="50">
var gainNode = ac[ac.createGain ? "createGain" :"createGainNode"]();
gainNode.connect(ac.destination);
function getMusic(name){
//...代碼同上，只有一處需要修改
bufferSource.connect(gainNode); //因為上面已經將gainNode連接到ac.destination了，所以這里只需鏈接到gainNode即可；
}
$("#volume").change(function(){
changeVolume($(this).val()/$(this).attr("max"));
})
function changeVolume(num){
gainNode.gain.value = num * num;
}
以上代碼就可以實現獲取音頻進行播放了，當然這只是一個開始，接下來一篇對音頻進行分析。