Babylon Sound: загрузка и воспроизведение

Звуковая система Babylon.js основана на возможностях Web Audio API и предназначена для работы со звуковыми эффектами, музыкой, пространственным аудио и управлением воспроизведением в 3D-сценах. Подсистема позволяет загружать аудиофайлы, управлять громкостью, воспроизводить звуки с задержкой, создавать зацикленные эффекты, а также привязывать звук к объектам сцены.

Основным классом для работы со звуком является BABYLON.Sound, который инкапсулирует аудиоресурс и предоставляет API для его управления.

Звуки могут работать в двух режимах:

  • обычное воспроизведение (2D-звук) — звук не зависит от положения камеры;
  • пространственное воспроизведение (3D-звук) — громкость и панорама зависят от расстояния и положения источника относительно камеры.

Такая модель позволяет реализовывать реалистичные звуковые эффекты в игровых и интерактивных приложениях.

Загрузка аудиофайлов

Загрузка звука происходит при создании объекта BABYLON.Sound. В конструктор передаются:

  1. имя звука;
  2. путь к аудиофайлу;
  3. сцена;
  4. функция обратного вызова после загрузки;
  5. параметры воспроизведения.

Базовый пример загрузки

const sound = new BABYLON.Sound(
    "laser",
    "sounds/laser.wav",
    scene,
    null,
    {
        autoplay: false,
        loop: false
    }
);

После загрузки звук готов к воспроизведению.

Babylon.js поддерживает несколько аудиоформатов:

  • .mp3
  • .wav
  • .ogg

Для кроссбраузерной совместимости часто используется массив альтернативных источников.

const music = new BABYLON.Sound(
    "music",
    ["music.mp3", "music.ogg"],
    scene
);

Движок автоматически выбирает формат, поддерживаемый браузером.

Автоматическое воспроизведение

Параметр autoplay позволяет запустить звук сразу после загрузки.

const backgroundMusic = new BABYLON.Sound(
    "bg",
    "sounds/background.mp3",
    scene,
    null,
    {
        autoplay: true,
        loop: true,
        volume: 0.5
    }
);

Используемые параметры:

Параметр Назначение
autoplay автоматический запуск
loop зацикливание
volume уровень громкости

Следует учитывать, что некоторые браузеры блокируют автоматическое воспроизведение до первого взаимодействия пользователя со страницей.

Управление воспроизведением

Класс Sound предоставляет набор методов управления звуком.

Основные методы

Метод Назначение
play() запуск воспроизведения
pause() пауза
stop() остановка
setVolume() изменение громкости
setPlaybackRate() изменение скорости

Пример использования

sound.play();

sound.pause();

sound.stop();

Изменение громкости:

sound.setVolume(0.8);

Изменение скорости воспроизведения:

sound.setPlaybackRate(1.5);

Значение 1.0 соответствует нормальной скорости.

Проверка состояния звука

Babylon.js предоставляет методы проверки состояния звука.

Метод Описание
isPlaying возвращает true при воспроизведении
isPaused проверка паузы
isReady() звук загружен

Пример:

if (sound.isReady()) {
    sound.play();
}

Настройки звука при создании

Конструктор BABYLON.Sound принимает объект конфигурации.

Основные параметры

Параметр Описание
autoplay автоматический запуск
loop зацикливание
volume громкость
spatialSound включение 3D-звука
maxDistance максимальная дистанция слышимости
rolloffFactor скорость затухания

Пример конфигурации

const engineSound = new BABYLON.Sound(
    "engine",
    "sounds/engine.wav",
    scene,
    null,
    {
        loop: true,
        volume: 0.7,
        spatialSound: true,
        maxDistance: 50
    }
);

Пространственный звук (3D Audio)

Одной из ключевых возможностей Babylon.js является пространственный звук, который позволяет учитывать положение источника относительно камеры.

Для этого используется параметр spatialSound.

const explosion = new BABYLON.Sound(
    "explosion",
    "sounds/explosion.wav",
    scene,
    null,
    {
        spatialSound: true
    }
);

При включении пространственного режима движок использует Web Audio PannerNode, что позволяет реализовать:

  • изменение громкости по расстоянию
  • стереопанораму
  • эффект направления источника

Привязка звука к объекту сцены

Звук можно привязать к конкретному объекту сцены. В этом случае источник звука будет перемещаться вместе с объектом.

sound.attachToMesh(mesh);

Пример:

const engineSound = new BABYLON.Sound(
    "engine",
    "engine.wav",
    scene,
    null,
    { loop: true, spatialSound: true }
);

engineSound.attachToMesh(carMesh);

Теперь при движении carMesh звук будет перемещаться в пространстве.

Управление расстоянием слышимости

При использовании 3D-звука важную роль играет затухание.

Параметры затухания

Параметр Назначение
maxDistance дистанция, после которой звук почти не слышен
refDistance расстояние полной громкости
rolloffFactor скорость уменьшения громкости

Пример:

const sound = new BABYLON.Sound(
    "ambient",
    "ambient.mp3",
    scene,
    null,
    {
        spatialSound: true,
        refDistance: 5,
        maxDistance: 100,
        rolloffFactor: 2
    }
);

Направленный звук

Babylon.js позволяет задавать направление источника звука.

Это используется для имитации громкоговорителей, двигателей и других направленных источников.

sound.setDirectionalCone(90, 180, 0.2);

Параметры метода:

Параметр Значение
innerAngle угол полной громкости
outerAngle внешний угол
outerGain громкость за пределами угла

После настройки необходимо указать направление:

sound.setLocalDirectionToMesh(new BABYLON.Vector3(1, 0, 0));

Отложенное воспроизведение

Звук может воспроизводиться с задержкой.

sound.play(2);

В данном примере звук начнёт воспроизводиться через 2 секунды.

События загрузки звука

Для выполнения действий после загрузки используется callback.

const sound = new BABYLON.Sound(
    "shot",
    "shot.wav",
    scene,
    function () {
        console.log("Sound loaded");
    }
);

После полной загрузки аудиофайла выполняется переданная функция.

Групповое управление звуком

Babylon.js использует AudioEngine, который управляет всей звуковой системой сцены.

Через него можно управлять глобальной громкостью.

BABYLON.Engine.audioEngine.setGlobalVolume(0.5);

Полное отключение звука:

BABYLON.Engine.audioEngine.setGlobalVolume(0);

Звуковые спрайты (Audio Sprites)

Babylon.js поддерживает audio sprites — один аудиофайл, содержащий несколько звуковых фрагментов.

Это уменьшает количество сетевых запросов.

const spriteSound = new BABYLON.Sound(
    "sprite",
    "effects.mp3",
    scene
);

Воспроизведение фрагмента:

spriteSound.play(0, 1.5);

Параметры:

Аргумент Значение
первый начальная позиция
второй длительность

Оптимизация звуковых ресурсов

При работе со звуком важно учитывать производительность.

Основные рекомендации:

1. Ограничение количества одновременно играющих звуков

Большое количество активных источников может создать нагрузку на браузер.

2. Использование сжатых форматов

Форматы .ogg и .mp3 значительно уменьшают размер файлов.

3. Предварительная загрузка

Часто используемые эффекты лучше загружать заранее.

4. Повторное использование объектов

Создание новых объектов Sound для каждого эффекта менее эффективно, чем повторное использование уже загруженных.

Удаление звука

Для освобождения памяти звук можно удалить.

sound.dispose();

Метод:

  • останавливает воспроизведение;
  • удаляет аудиоресурс;
  • освобождает память Web Audio.

Типичный сценарий использования

Последовательность работы со звуком в Babylon.js обычно включает следующие этапы:

  1. создание объекта BABYLON.Sound;
  2. загрузка аудиофайла;
  3. настройка параметров;
  4. привязка к объекту сцены (при необходимости);
  5. управление воспроизведением.

Пример полного цикла:

const shotSound = new BABYLON.Sound(
    "shot",
    "sounds/shot.wav",
    scene,
    null,
    {
        spatialSound: true,
        maxDistance: 30
    }
);

shotSound.attachToMesh(gunMesh);

function fire() {
    shotSound.play();
}

В результате при каждом вызове функции fire() звук будет воспроизводиться в точке расположения объекта gunMesh, создавая реалистичный пространственный эффект.

Оглавление