p5.js：sound（音乐）可视化，动画显示音频高低变化

原创

已于 2025-03-23 19:19:25 修改 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #p5.js #p5.sound #audio #fft

于 2025-03-09 12:39:31 首次发布

本文通过4个案例介绍了使用 p5.js 进行音乐可视化的实践，包括将音频振幅转化为图形、生成波形图。

承上一篇：vite：初学 p5.js demo 画圆圈

cd p5-demo
copy .\node_modules\p5\lib\p5.min.js .
copy .\node_modules\p5\lib\addons\p5.sound.min.js .

在 p5.js 里，FFT() 是 p5.FFT 类的构造函数，p5.FFT 是 p5.sound 库中的一个重要类，它代表快速傅里叶变换（Fast Fourier Transform，FFT）。FFT 是一种在信号处理领域广泛使用的算法，主要用于将时域信号转换为频域信号，通过它能够分析信号在不同频率上的能量分布情况。

作用

在音频可视化的场景中，p5.FFT 可把音频信号从时域转换为频域，让你能获取音频在不同频率下的振幅信息，进而根据这些信息实现音频可视化效果，比如绘制频谱图、波形图等。

用法

在使用 p5.FFT 时，一般先创建一个 p5.FFT 对象，然后在 draw() 函数中调用其 analyze() 方法来获取音频频谱数据。

编写 p5_audio_vis.html 如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>p5.js Audio Visualization</title>
 	<script src="p5.min.js"></script>
	<script src="p5.sound.min.js"></script>
</head>
<body>
    <script>
        let song; // 音乐
        let fft;  // 快速傅里叶变换

        //1.预读器（新建函数用来读取音频文件）
        function preload() {
            // 请替换为你自己的音频文件路径
            song = loadSound('your_audio_file.mp3');
        }
        //2.初始化
        function setup() {
            createCanvas(400, 400);
            fft = new p5.FFT();
         // 图形一般由填充色和边框两部分组成;noStroke()函数可以关闭边框的绘制
            noStroke();
        }
        //3.开始绘制
        function draw() {
            background(0); // spectrum 波谱、频谱
            let spectrum = fft.analyze();
            noStroke();
            fill(255, 0, 255);
            for (let i = 0; i < spectrum.length; i++) {
                let x = map(i, 0, spectrum.length, 0, width);
                let h = -height + map(spectrum[i], 0, 255, height, 0);
                rect(x, height, width / spectrum.length