用音乐让心情变得可见

2023-10-16 10:41:23

如今，许多音乐网站都会搭配一些动感的音乐可视化效果，从而让音乐的欣赏变得更加丰富多彩。另外，音乐可视化效果现在经常被应用到音乐游戏中，将音乐的节奏可视化地展现，以此让玩家有更好更多的互动。今天我们就用最简单的方法实现一个音频可视化效果，使用 JavaScript、Canvas 以及 HTML5 的音频 API，从而让我们的 web 页面变得更加生动。

前期准备

HTML 代码

首先，我们创建一个 HTML 文件，用来包含所有代码。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="canvas" width="500" height="500"></canvas>
  <script src="script.js"></script>
</body>
</html>

JavaScript 代码

在 HTML 文件中引入 script.js 文件，其中包含了所有的 JavaScript 代码。

// 获取 canvas 元素
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 创建音频上下文
const audioCtx = new AudioContext();

// 创建音频分析器
const analyser = audioCtx.createAnalyser();

// 设置分析器的频域数据长度
analyser.fftSize = 256;

// 创建音频源
const audio = document.querySelector("audio");
audio.crossOrigin = "anonymous";

// 将音频源连接到分析器
audio.connect(analyser);

// 将分析器连接到输出设备
analyser.connect(audioCtx.destination);

// 创建一个 Uint8Array 来存储频域数据
const data = new Uint8Array(analyser.frequencyBinCount);

// 渲染动画
function render() {
  requestAnimationFrame(render);

  // 获取频域数据
  analyser.getByteFrequencyData(data);

  // 清除 canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制频域数据
  for (let i = 0; i < data.length; i++) {
    const height = data[i] / 255 * canvas.height;
    ctx.fillRect(i, canvas.height - height, 1, height);
  }
}

// 启动动画
render();