4. Звук в p5.js


Для работы со звуком в p5.js используется библиотека p5.sound, которая подключается дополнительно. Она предоставляет простые функции загрузки, воспроизведения, а также анализа звука (FFT, амплитуда).

Подключение: добавить в HTML второй скрипт после p5.js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/addons/p5.sound.js"></script>

Основные возможности:

  • loadSound() – загрузка звукового файла (форматы mp3, wav, ogg).
  • .play(), .loop(), .stop() – управление воспроизведением.
  • .setVolume(vol) – громкость от 0 до 1.
  • .setRate(rate) – скорость воспроизведения.
  • getAmplitude() – текущая громкость звука (полезна для визуализации).
  • p5.FFT – быстрый анализ спектра.

Пример: загрузка и воспроизведение по клику, визуализация амплитуды

let soundFile;
let amplitude;
let isPlaying = false;

function preload() {
    // preload гарантирует загрузку до setup
    soundFile = loadSound('sound.mp3');
}

function setup() {
    createCanvas(400, 400);
    amplitude = new p5.Amplitude();   // следит за громкостью
    amplitude.setInput(soundFile);
}

function draw() {
    background(0);
    
    let vol = amplitude.getLevel();    // значение от 0 до ~1
    let circleSize = map(vol, 0, 0.3, 10, 200);
    
    fill(255);
    ellipse(width/2, height/2, circleSize, circleSize);
    
    if (isPlaying) {
        fill(0, 255, 0);
        text('Играет', 10, 20);
    } else {
        fill(255);
        text('Кликните для воспроизведения', 10, 20);
    }
}

function mousePressed() {
    if (!isPlaying) {
        soundFile.loop();   // зацикливание
        isPlaying = true;
    } else {
        soundFile.stop();
        isPlaying = false;
    }
}

Важно: как и в Three.js, автовоспроизведение звука ограничено браузерами. Поэтому вызов .play() или .loop() должен происходить в результате действия пользователя (например, в mousePressed или keyPressed). В примере выше используется loop() по клику, хотя звук уже загружен в preload.