О чем этот пример

Звуковое сопровождение — ключевой элемент атмосферы любой игры. Phaser предоставляет мощную, но гибкую систему аудио, способную работать как через Web Audio API, так и через классический HTML5 Audio. В этой статье мы разберем базовый пример загрузки и воспроизведения фоновой музыки, используя именно HTML5 Audio. Этот подход отлично подходит для простых звуковых эффектов или длинных музыкальных треков, где не требуется сложная пространственная обработка звука. Вы научитесь настраивать конфигурацию, загружать аудиофайлы в разных форматах для кросс-браузерной совместимости и управлять их воспроизведением.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код


class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.audio('theme', [
            'assets/audio/oedipus_wizball_highscore.ogg',
            'assets/audio/oedipus_wizball_highscore.mp3'
        ]);

        this.load.image('wizball', 'assets/sprites/wizball.png');
    }

    create ()
    {
        this.add.image(400, 300, 'wizball').setScale(4);

        const music = this.sound.add('theme');

        music.play();
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    pixelArt: true,
    scene: Example,
    audio: {
        disableWebAudio: true
    }
};

const game = new Phaser.Game(config);

Загрузка аудиоресурсов в `preload`

Как и все ресурсы в Phaser, аудиофайлы необходимо загрузить до их использования. Это делается в методе preload сцены. Ключевой метод — this.load.audio. Важной особенностью является возможность указать массив путей к файлам в разных форматах (например, .ogg и .mp3). Это обеспечивает поддержку во всех современных браузерах, так как каждый из них имеет свой предпочтительный формат.

Также в примере задается базовый URL для загрузки через this.load.setBaseURL. Это удобно, если все ресурсы хранятся в одном месте. Параллельно загружается спрайт для визуального отображения.

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.audio('theme', [
    'assets/audio/oedipus_wizball_highscore.ogg',
    'assets/audio/oedipus_wizball_highscore.mp3'
]);

this.load.image('wizball', 'assets/sprites/wizball.png');

Создание и воспроизведение звука в `create`

После загрузки ресурсов в методе create можно создать экземпляр звукового объекта и начать его воспроизведение. Сначала для демонстрации добавляется изображение на сцену.

Затем с помощью менеджера звуков this.sound создается объект Sound. Метод this.sound.add принимает в качестве аргумента ключ аудио, заданный при загрузке (в нашем случае 'theme'). Возвращенный объект сохраняется в переменную music.

Для немедленного начала проигрывания вызывается метод .play() у этого объекта. На этом этапе звук начнет играть в фоновом режиме.

this.add.image(400, 300, 'wizball').setScale(4);

const music = this.sound.add('theme');

music.play();

Конфигурация игры: выбор HTML5 Audio

Самый важный аспект этого примера — конфигурация игры, которая заставляет Phaser использовать HTML5 Audio вместо более современного Web Audio API. Это делается через свойство audio в главном конфигурационном объекте.

Установка disableWebAudio: true указывает Phaser переключиться на HTML5 Audio. Это может быть полезно в специфических случаях, например, для воспроизведения длинных аудиопотоков или для упрощения отладки. Также в конфиге задаются базовые настройки окна игры, указывается главный класс сцены и включается режим pixelArt для четкого отображения пиксельной графики.

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    pixelArt: true,
    scene: Example,
    audio: {
        disableWebAudio: true // Включаем использование HTML5 Audio API
    }
};

const game = new Phaser.Game(config);

Что попробовать дальше

Воспроизведение звука через HTML5 Audio в Phaser — это простой и эффективный способ добавить аудио в вашу игру. Вы освоили базовый цикл: загрузка, создание объекта и запуск. Для экспериментов попробуйте управлять громкостью через music.setVolume(0.5), сделать звук зацикленным с помощью music.setLoop(true) или приостановить/возобновить воспроизведение методами music.pause() и music.resume(). Чтобы глубже понять разницу, попробуйте запустить этот же пример без флага disableWebAudio: true и сравнить поведение.