> 資料來源：http://studio.bfw.wiki/Studio/Open/id/15832890572989400098.html ``` // 創建音頻軌跡 let audioContext = new (window.AudioContext||window.webkitAudioContext); var src = audioContext .createMediaElementSource(audio); // 將 audio 對象添加到資源來源 var analyser = audioContext .createAnalyser(); src.connect(analyser); analyser.connect(audioContext .destination); analyser.fftSize = 128;//快速傅里葉變換, 必須為2的N次方 var bufferLength = analyser.frequencyBinCount; // = fftSize * 0.5 //part4: 變量 var barWidth = (WIDTH / bufferLength) - 1;//間隔1px var barHeight; var dataArray = new Uint8Array(bufferLength);//8位無符號定長數組 // 下面是通過音頻更新觸發的值 analyser.getByteFrequencyData(dataArray);//獲取當前時刻的音頻數據 var x = 0; for (var i = 0; i < bufferLength; i++) { var data = dataArray[i];//int,0~255 var percentV = data / 255;//縱向比例 var percentH = i / bufferLength;//橫向比例 barHeight = HEIGHT * percentV; //gbk,0~255 var r = 255 * percentV;//值越大越紅 var g = 255 * percentH;//越靠右越綠 var b = 50; context.fillStyle = "rgb(" + r + "," + g + "," + b + ")"; context.fillRect(x, HEIGHT - barHeight, barWidth, barHeight); x += barWidth + 1;//間隔1px } // ```