“滄海一聲唱 滔滔兩岸潮
浮沉隨浪歌舞今朝
蒼天唱 紛紛世上潮
誰負誰勝出天知曉
江山唱 煙雨遙
濤浪淘盡紅塵俗世幾多嬌
清風唱 竟惹寂寥
豪情還剩了一襟晚照
蒼生唱 不再寂寥
豪情仍在痴痴唱唱”
—— 題記，《滄海一聲唱》

正文

在上文 JS | Web Audio API (上) 你的音譜 中，我們瞭解到Audio API簡單的音訊知識點，重在理論，今天搞點有趣的試驗，偏重實踐。大家知道，光有光譜，電磁波有頻譜，音樂呢？當然也有自己的譜。想奧斯特實驗揭示電流周圍存在磁場，分散的鐵屑顯現磁鐵的磁場分佈，那音樂如何看到自身的頻率，所以，本文的主題來了，音訊視覺化，讓你的音樂浪起來。先附上效果圖，接下來會主要圍繞效果例子出發：

這種音波似的效果，我們可能會在音樂室或音樂人或音樂播放器那兒看到，並不少見，當第一次發現可以實現時，ohMyGod，震撼，神奇，而對於喜歡的事物，總會想為我所用，閒話不多說，一起看看它是怎麼實現的吧。根據已有的web audio API知識，實踐音訊視覺化，自我總結，步驟大致分為以下幾步：

1. 建立音訊環境
2. 獲取音訊，建立buffer節點
3. 解碼音訊，分析音訊
4. 連線音訊輸入輸出
5. canvas繪製頻譜
6. 連線播放

建立音訊環境AudioContext

音訊環境是所有音效操作的前提，好比canvas的畫布，先有個做畫之地，再來筆墨橫姿

// Webkit/blink browser require
 
 a prefix, and it needs the window object specifically declared to work in Safari
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window
 
.mozRequestAnimationFrame || window.msRequestAnimationFrame;

// declare new audio context
try {
    var audioCtx = new AudioContext();
} catch (e) {
    alert('Your browser does not support AudioContext!');
    console.log(e);
}

獲取音訊，建立buffer節點

首先獲取音訊，也就是說拿到這個素材輸入之後，我們可以趕製加工，這裡通過XMLHttpRequest獲取，將請求的返回型別設為“arraybuffer”，方便音訊資料處理；另外，建立音訊節點createBufferSource，來獲取輸入的音訊。

// use XHR to load an audio track, and
// decodeAudioData to decode it and stick it in a buffer.
// Then we put the buffer into the source
var xhr = new XMLHttpRequest();

// 初始化 HTTP 請求引數, 配置請求型別，檔案路徑等
xhr.open('GET', 'audio/music1.mp3');

// 將responseType設為arraybuffer,二進位制資料
xhr.responseType = "arraybuffer";

// 獲取完成，對音訊進一步操作，解碼
xhr.onload = function() {
    var audioData = xhr.response;
    // Get an AudioBufferSourceNode.
    // This is the AudioNode to use when we want to play an AudioBuffer
    var source = audioCtx.createBufferSource();
    ……
}

解碼音訊，分析音訊

好的，現在我們拿到了音樂，但計算機仍然不懂，需要對其進行解碼decodeAudioData。
一看到解碼後的資料，我們不能讓計算機“啪啪啪”就來吧，觀個全域性，做個自我分析，createAnalyser。

audioCtx.decodeAudioData(audioData, function(buffer) {
        // set the buffer in the AudioBufferSourceNode
        source.buffer = buffer;

        // create audio node to play the audio in the buffer
        var analyser = audioCtx.createAnalyser();
}

連線音訊輸入輸出

必經之路，input ——> 音訊處理 ——> 輸出，connect連線。

// connect the analyser to the destination(the speaker), or we won't hear the sound
// from audioCtx.createBuffer, or audioCtx.decodeAudioData
source.connect(analyser);
analyser.connect(audioCtx.destination);

canvas繪製頻譜

大頭戲，音樂播放搗鼓搗鼓還是有聲音的，頻譜怎麼著，一頭霧水。不著急，慢慢來，首先我們需要資料，資料怎麼來：

var bufferLength = analyser.frequencyBinCount,
    dataArray = new Uint8Array(bufferLength);

analyser.getByteFrequencyData(dataArray);

好，資料有了，計算機也能懂，怎麼畫，先說個簡單的：

var canvas = document.getElementById('audio_canvas'),
    ctx = canvas.getContext("2d"),
    c_width = canvas.width,
    c_height = canvas.height;

**************
for(var i = 0; i < bufferLength; i++) {
     value = dataArray[i];
     ctx.fillStyle = '#f99';
     ctx.fillRect(i, c_height - value, 1, value);
}

好了，頻譜圖有了，但沒有動效，不會變化，別急，利用requestAnimationFrame，同時這側面反應了獲取的dataArray陣列的數值，出來的效果如此這般：

可是我們想，如果把所有的數值都展現出來，一來太多，二來更耗資源，而且頻率鄰值是相似的，非智者所為，怎麼處理呢？數學中有學過取樣頻率的方法，取樣對於資訊訊號來說，是個常用的方式。根據畫布長度，美觀起見，讓每一頻佔據一定寬度，各個頻之間留些空隙，同時用數學邏輯思維換算，計算出畫布可放的頻數，也就是說畫布上選擇哪幾個頻率值顯示，取相對應“編號”的頻率，進行繪製。

// 條形的寬度
var bar_width = 10,
    bar_gap = 2,
    bar_part = bar_width + bar_gap,
    bar_num = Math.round(c_width / bar_part);

***************************************
      function drawVisual() {
            var i = 0, value;

            var bufferLength = analyser.frequencyBinCount,
                dataArray = new Uint8Array(bufferLength);

            // 每段包含的頻譜寬
            var array_width = Math.round(bufferLength / bar_num);

            analyser.getByteFrequencyData(dataArray);

            ctx.clearRect(0,0,c_width,c_height)

            for(i; i < bar_num; i++) {
                value = dataArray[i * array_width];

                ctx.fillStyle = '#f99';
                ctx.fillRect(bar_part * i, c_height - value, bar_width, value);
            }

            animation_id = requestAnimationFrame(drawVisual);
            // console.log(animation_id)
        }

思考

如此一來，大致效果已經實現。在做的過程中，有一個問題需要思考： 動畫什麼時候停止，也就是說，如何在音樂播放結束的情況下，頁面頻譜流暢地迴歸空白，瀏覽器也不會繼續動畫，做到“該停止時就停止”。【實踐結果證明，如果在音樂播放結束就停止動畫或者清空，達不到想要的效果】

為了美觀及更有趣味性，我們可以加個緩慢降落的條形；甚者，採取上傳檔案的形式，根據上傳的音樂“舞動”自己的音浪，因頻制浪。這裡有個稍難的點：已經播放一首音樂的時候，如何做到繼續上傳，原音樂停止，新音樂播放並出現相應的頻譜。

【程式碼存在於 github，僅供參考，敬請交流】