今天，我們將談論的是 JavaScript 頻譜圖，這是一種強大的可視化方法，可用于展示和分析音頻信號的頻譜信息。頻譜圖是一個 2D 圖，通常由頻率和振幅組成。在 JavaScript 中，我們可以使用 Web Audio API 和 Canvas API 來創建頻譜圖，讓我們看看如何實現它！

首先，我們需要從音頻文件中獲取音頻數據。在 Web Audio API 中，我們可以使用 AudioContext 和 AnalyserNode 類來實現。以下是一個簡單的例子：

const audioContext = new AudioContext(); //創建 AudioContext 實例
const audioElement = document.getElementById('audio');
const sourceNode = audioContext.createMediaElementSource(audioElement);
const analyserNode = audioContext.createAnalyser();
sourceNode.connect(analyserNode);
analyserNode.connect(audioContext.destination);

在這個例子中，我們創建了一個 AudioContext 實例，獲取了 audio 元素并創建了一個 MediaElementSource 媒體元素源，再創建一個 AnalyserNode 分析器節點。然后，我們將 MediaElementSource 與 AnalyserNode 和 AudioContext 的 destination 進行連接。現在，我們已經從音頻中獲取了數據，并準備好將其可視化。

接下來，我們將使用 Canvas API 創建頻譜圖。請注意，Canvas API 是 HTML5 中的一個重要組成部分，在現代 Web 開發中已被廣泛使用。以下是 Canvas API 的基本結構：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

在這個例子中，我們從 HTML DOM 中獲取了 canvas 元素，并使用 getContext() 方法獲取了繪圖環境。getContext() 方法有一個必需的參數，通常是 '2d' 或 'webgl'。

現在，我們已經準備好創建并繪制頻譜圖了。以下是一個完整的範例代碼：

//獲取音頻數據
const audioContext = new AudioContext();
const audioElement = document.getElementById('myAudio');
const sourceNode = audioContext.createMediaElementSource(audioElement);
const analyserNode = audioContext.createAnalyser();
sourceNode.connect(analyserNode);
analyserNode.connect(audioContext.destination);
//創建 Canvas 元素
const canvas = document.getElementById('myCanvas');
const canvasCtx = canvas.getContext('2d');
function draw() {
requestAnimationFrame(draw);
//創建 Uint8Array 數組
const bufferLength = analyserNode.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
//獲取頻率數據并繪制頻譜圖
analyserNode.getByteFrequencyData(dataArray);
//清空畫布
canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
//繪制頻譜圖
const barWidth = (canvas.width / bufferLength) * 2.5;
let barHeight;
let x = 0;
for(let i = 0; i < bufferLength; i++) {
barHeight = dataArray[i];
canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
canvasCtx.fillRect(x,canvas.height-barHeight/2,barWidth,barHeight/2);
x += barWidth + 1;
}
}
draw();

在這個代碼片段中，我們首先獲取了音頻數據，然后創建了 Canvas 元素和繪圖環境。接下來，我們定義了一個 draw() 函數，并在其中使用 requestAnimationFrame() 方法不斷地更新頻譜圖。在這個函數中，我們創建了一個 Uint8Array 數組，用于存儲頻率數據，并使用 AnalyserNode 的 getByteFrequencyData() 方法將該數據存儲在數組中。

接下來，我們使用 Canvas API 將頻率數據轉換為一個可視化的頻譜圖。我們首先清空畫布，然后使用循環遍歷數據數組，并在每個數據點處繪制一個矩形。我們為矩形指定顏色，并使用 fillRect() 方法繪制矩形。最后，我們更新 x 值，以便下一次循環時繪制下一個矩形。

到這里，我們已經成功地創建了一個 JavaScript 頻譜圖，它可以展示音頻文件的頻譜信息。這是一個有趣且有用的技術，可以幫助我們更好地理解音頻信號，并將其可視化。