Для работы со звуком в 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.