用 Three.js 和 AudioContext 实现音乐频谱的 3D 可视化

2023-10-13 13:19:19

在数字时代，音乐已经成为我们生活中不可或缺的一部分。为了让音乐体验更加沉浸式，一些艺术家和开发人员正在探索使用 Three.js 和 AudioContext 等技术创建音乐的可视化。Three.js 是一个 JavaScript 库，用于在网络浏览器中创建和渲染 3D 图形，而 AudioContext 是一个 Web API，用于处理音频数据。

通过结合这两项技术，我们可以创建交互式音乐可视化效果，响应音乐的节奏和旋律。这些可视化效果可以增强听觉体验，并为音乐爱好者提供一种新的方式来欣赏他们喜爱的曲目。

实施音乐频谱的可视化

在本教程中，我们将向您展示如何使用 Three.js 和 AudioContext 实现音乐频谱的 3D 可视化。具体来说，我们将创建一个交互式场景，其中包含响应音频输入的几何体。

前提条件

在开始之前，您需要确保满足以下先决条件：

Node.js 和 npm 已安装在您的系统上
一个文本编辑器或 IDE
对 Three.js 和 AudioContext 有基本的了解

步骤 1：设置项目

首先，创建一个新目录并初始化一个新的 npm 项目：

mkdir music-visualizer
cd music-visualizer
npm init -y

接下来，安装 Three.js 和 AudioContext 的依赖项：

npm install three audio-context-analyser

步骤 2：创建场景

在您的项目目录中创建一个名为 index.html 的文件，并添加以下 HTML 代码：

<!DOCTYPE html>
<html>
  <head>
    
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }

      canvas {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <canvas id="canvas"></canvas>

    <script src="script.js"></script>
  </body>
</html>

步骤 3：编写脚本

在同一目录中创建一个名为 script.js 的文件，并添加以下 JavaScript 代码：

import * as THREE from "three";
import { AudioContextAnalyser } from "audio-context-analyser";

// 场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = 5;

// 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 音频上下文
const audioCtx = new AudioContext();
const analyser = new AudioContextAnalyser(audioCtx, 256);

// 音频输入
const audioInput = new Audio("path/to/audio.mp3");
audioInput.crossOrigin = "anonymous";
audioInput.play();

// 频率数据
const dataArray = new Uint8Array(analyser.frequencyBinCount);

// 渲染循环
function animate() {
  requestAnimationFrame(animate);

  // 更新频率数据
  analyser.getByteFrequencyData(dataArray);

  // 更新几何体
  cube.scale.y = dataArray[0] / 255;
  cube.scale.x = dataArray[1] / 255;
  cube.scale.z = dataArray[2] / 255;

  // 渲染场景
  renderer.render(scene, camera);
}

animate();