HTML5 ——web audio API 音樂可視化(一)

使用Web Audio API能夠對音頻進行分析和操做，最終實現一個音頻可視化程序。

最終效果請戳這裏;

完整版代碼請戳這裏，若是還看得過眼，請給一個start⭐

1、API

1. AudioContext: 該接口表示由音頻模塊連接而成的一個音頻上處理下文，相似於canvas裏面getContext(2d)返回的對象，對音頻的一切 操做都在這個環境裏進行；它包含各個AudioNode對象以及他們相關聯的對象，建立方法以下：

   ​ var ac = new window.AudioContect();

2. AudioNode:音頻節點，是一個音頻處理模塊，它包括GainNode(音量控制器)、BiquadFilterNode(濾波器)等；

3. AudioContext的屬性：

   • AudioContext.currentTime: AudioContext從建立開始到當前的時間，單位秒，是一個只讀屬性，不可對其進行操做；
   • AudioContext.destination:返回AudioDestinationNode對象，全部音頻輸出的彙集地，全部的AudioNode都直接或間接地連接到這裏；
   • AudioContext.state:返回AudioContext的當前狀態；

4. 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();

5. AudioBufferSourceNode:表示內存中的一段音頻資源，其音頻數據存儲於AudioBuffer中(buffer屬性中)，建立方式：

   ​ var buffersource = ac.createBufferSource();

   此對象有3個經常使用的屬性：

   ​ 1).buffer:AudioBuffer對象，表示要播放的音頻資源數據。他有一個子屬性：duration，該音資源的時長，單位秒；

   ​ 2).loop:是否循環播放，默認是false；

   ​ 3).onended:綁定音頻播放完畢時調用的實踐處理程序；

   經常使用的方法：

   1. start/noteOn(when=ac.currentTime,offset=0,duration=buffer.duration-offset),開始播放音頻。其中，when：什麼時候開始播放；offset:從音頻的第幾秒開始播放；duration:播放幾秒;
   2. stop/noteOff(when=ac.currentTime):結束播放；

2、播放一個音頻

經過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;
   }

以上代碼就能夠實現獲取音頻進行播放了，固然這只是一個開始，接下來一篇對音頻進行分析。