JavaScript 实时绘制音乐频谱图教程

要实时绘制音乐频谱图，可以使用 HTML5 中的 Web Audio API 和 Canvas API 结合起来实现。以下是一个简单的实现步骤：

创建音频上下文和分析器

首先，使用 Web Audio API 创建一个音频上下文，然后创建一个 AnalyserNode 分析器，用于分析音频数据。

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();

获取音频数据

接下来，获取音频数据并将其传递给分析器进行分析。可以通过创建一个 AudioBufferSourceNode 节点来播放音频，并使用 XMLHttpRequest 从服务器获取音频数据。

var audioSource = audioCtx.createBufferSource();
var audioRequest = new XMLHttpRequest();
audioRequest.open('GET', 'audio.mp3', true);
audioRequest.responseType = 'arraybuffer';
audioRequest.onload = function() {
  var audioData = audioRequest.response;
  audioCtx.decodeAudioData(audioData, function(buffer) {
    audioSource.buffer = buffer;
    audioSource.connect(analyser);
    analyser.connect(audioCtx.destination);
    audioSource.start(0);
  });
}
audioRequest.send();

绘制频谱图

在每个音频帧中，获取分析器中的频谱数据，并使用 Canvas API 绘制频谱图。可以使用 Canvas API 的 fillRect 函数绘制频谱图。

function draw() {
  requestAnimationFrame(draw);
  var freqData = new Uint8Array(analyser.frequencyBinCount);
  analyser.getByteFrequencyData(freqData);
  var canvas = document.getElementById('canvas');
  var canvasCtx = canvas.getContext('2d');
  canvasCtx.fillStyle = 'rgb(0, 0, 0)';
  canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
  var barWidth = canvas.width / freqData.length;
  var barHeight;
  var x = 0;
  for (var i = 0; i < freqData.length; i++) {
    barHeight = freqData[i];
    canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
    canvasCtx.fillRect(x, canvas.height-barHeight/2, barWidth, barHeight/2);
    x += barWidth;
  }
}
draw();

在这个例子中，使用 Canvas API 绘制一个矩形来代表每个频率的音量大小。通过循环遍历每个频率的音量数据，并将其转换为矩形高度，然后使用 Canvas API 绘制矩形。这个绘制过程在 requestAnimationFrame 函数中执行，以便在每个音频帧中更新频谱图。

完整代码如下：

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();

var audioSource = audioCtx.createBufferSource();
var audioRequest = new XMLHttpRequest();
audioRequest.open('GET', 'audio.mp3', true);
audioRequest.responseType = 'arraybuffer';
audioRequest.onload = function() {
  var audioData = audioRequest.response;
  audioCtx.decodeAudioData(audioData, function(buffer) {
    audioSource.buffer = buffer;
    audioSource.connect(analyser);
    analyser.connect(audioCtx.destination);
    audioSource.start(0);
  });
}
audioRequest.send();

function draw() {
  requestAnimationFrame(draw);
  var freqData = new Uint8Array(analyser.frequencyBinCount);
  analyser.getByteFrequencyData(freqData);
  var canvas = document.getElementById('canvas');
  var canvasCtx = canvas.getContext('2d');
  canvasCtx.fillStyle = 'rgb(0, 0, 0)';
  canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
  var barWidth = canvas.width / freqData.length;
  var barHeight;
  var x = 0;
  for (var i = 0; i < freqData.length; i++) {
    barHeight = freqData[i];
    canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
    canvasCtx.fillRect(x, canvas.height-barHeight/2, barWidth, barHeight/2);
    x += barWidth;
  }
}
draw();

需要注意的是，为了在浏览器中使用 Web Audio API，需要使用支持的浏览器版本。在 Chrome、Firefox、Safari、Edge 和 Opera 浏览器中，Web Audio API 已经得到支持。