Утилиты и Программы

Часть 31: Создание аудио спраита программой audiosprite

Я уже давно обещал вам рассказать про создание аудио спрайтов. Как и графические спрайты, аудио спрайты (можете их воспринимать как плейлист) позволяют эномить память, процессорное время и без задержек воспроизводить аудио файлы. Для этих целей мы воспользуемся программой audiosprite. Она работает из командной строки, а так как передавать вручную список файлов и параметры конечного файла довольно нудно, мы автоматизируем этот процесс с помощью утилиты grunt-audiosprite.

Сама программа audiosprite не капризная и принимает на входе аудио файлы в разных форматах (mp3, wav и т.д.), после чего конвертирует и а на выходе выдает формат, который мы заказывали. Дополнительно есть возможность задать качество, битрейт и даже продолжительность тишины между аудио в конечном аудио файле.

генерация аудио спраита в формате mp3 и ogg

Так как браузера ни как не могут определиться с единым форматом, а также есть проблемы с авторскими правами на mp3 формат, разработчикам приходиться аудио файлы сохранять как в mp3 так и в ogg формата. Именно эти два формата охватывают почти весь спектр мобильных и планшетных устройств. Установка утилит очень простая:

npm install -g audiosprite
npm install grunt-audiosprite --save-dev --no-optional

Но что бы они работали, надо немного пошаманить. Во первых надо скачать и распаковать ffmpeg утилиту в любую папку на вашем ПК (я лично предпочитаю Program Files, что бы в будущем ее случайно не перенести в другое место или удалить). После надо прописать путь к этой папке в системную переменную PATH (как это сделать, можете почитать тут).

ВАЖНО: Я рекомендую добавлять путь в начало списка… а то к примеру у меня на ПК был установлен Embarcadero, в пакет которого входит утилита под названием convert, совпадающая с названием утилиты ImageMagic и представьте мое замешательство, когда я пол часа не мог понять, почему grunt-svg2png утилита не может сконвертировать svg в png =)

В инструкциях gruntfile.js нужно добавить новое задание:

audiosprite: {
  lesson1: {
    files: 'src/voice/1/*.mp3',
      output: 'assets/voice/1',
      export: 'ogg,mp3',
      bitrate: 64
  },
},

Вот и все! На выходе мы имеем 1.ogg, 1.mp3 и вспомогательный файл 1.json. Вам достаточно сообщить Phaser-у путь к этим аудио файлам и к файлу инструкций в JSON формате, а Phaser самостоятельно выберет тот, который поддерживает конкретно устройство на котором она запущен:

this.load.audiosprite(‘word_sound_list’, [‘assets/voice/1.ogg’, ‘assets/voice/1.mp3’], ‘assets/voice/1.json’);

После загрузки аудио спраита, добавляем его в нашу игру и сохраняем указатель в переменной, что бы была возможность проигрывать нужный нам файл из списка:

this.word_sound_list = this.game.add.audioSprite('word_sound_list');
this.word_sound_list.play('file_name');

Если вы планируете подгружать фоновую музыку, то примите во внимание, что на декодирование аудио файла нужно время (особенно на мобильных устройствах). По этому вы не должны запускать сцену при событии this.load.onLoadComplete, вместо этого надо установить обработчик события завершения декодировки:

this.game.sound.setDecodedCallback([this.word_sound_list, this.another_audio], this.audio_is_ready, this);

Комментарии, вопросы и пожелания как всегда приветствуются! Я уже писал, что один из навыков в игре я закончил и можно уже играть. Сейчас как раз буду писать об этом пост, тем более я успел добавить режим экзамена, который потребовал немного изменить код игры. Думаю до завтра должен успеть его написать и закачаю игру на сервер.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *