Каким образом Scirra получила настолько совершенное аудио в HTML5 в Construct 2? - PullRequest
29 голосов
/ 04 марта 2012

Посмотрите демоверсию космического шутера .

Аудио HTML5 идеально в Chrome 18 и Firefox 10. В каждом звуке и сэмпле нет задержкииграет отлично.В прошлый раз, когда я пытался воспроизводить звуки с использованием HTML5-аудио и JavaScript, я не мог воспроизвести звук более одного раза.

Какое колдовство делает Scirra, чтобы сделать это настолько совершенным?

1 Ответ

84 голосов
/ 05 марта 2012

Я разработчик Construct 2, поэтому я надеюсь, что достаточно квалифицирован, чтобы ответить на ваш вопрос:)

Аудио в HTML5 - действительно беспорядок, поэтому я постарался сделать его пуленепробиваемым в Construct 2, чтобы сделать его пуленепробиваемым. Вот краткое описание того, что я сделал:

Использование API Web Audio

Звук HTML5 предназначен для потоковой передачи музыки, поэтому объект HTML5 Audio является своего рода тяжелым объектом. Воспроизведение 10 звуков в секунду, как это делает Space Blaster, может легко захватить браузер. С другой стороны, Web Audio API - это высокопроизводительный звуковой движок с маршрутизацией, эффектами и легким воспроизведением звука. Это идеально подходит для игр. Аудио буферы и воспроизведение аудио разделены, так что вы можете иметь один буфер данных и эффективно воспроизводить его много раз одновременно, в то время как некоторые браузеры настолько глючат, если вы проигрываете звук HTML5 несколько раз, он загружает его каждый раз! Так как он на самом деле был разработан для игр и тому подобного, вы можете счастливо воспроизводить тонны звука целую вечность, и он все равно будет хорошо звучать. Он также может использовать аудио HTML5 в качестве источника звука, хотя я использую аудио HTML5 только для вещей, которые пользователь обозначил как музыкальные треки (поскольку именно здесь вы бы предпочли потоковую передачу - обычно все остальное в API Web Audio полностью загружается до играть).

API-интерфейс Web Audio поддерживается в Chrome, а также включен в iOS 6+ (хотя он отключен до тех пор, пока вы не попытаетесь воспроизвести звук в сенсорном событии), Firefox работает над поддержкой, и он должен скоро появиться в Chrome для Android. Так что на этих платформах звук будет значительно надежнее.

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

Другие браузеры: внедрить систему рециркуляции звука

API Web Audio еще не поддерживается повсеместно, особенно в IE, что означает, что вам все еще нужно разбирать аудио HTML5 на что-то, что может работать для игр для обратной совместимости. Способ сделать это состоит в том, чтобы переработать аудио объекты.

Лазер игрока в Space Blaster срабатывает 10 раз в секунду - и это не считая других звуковых эффектов! Как я упоминал ранее, аудио - это тяжелый объект, поэтому, если вы делаете new Audio() 10+ раз в секунду, о чудо, браузер в конечном итоге умирает, и звук начинает зависать. Тем не менее, вы можете значительно сократить количество аудио объектов, созданных путем их переработки.

Обычно для каждого звукового эффекта храните кэш каждого аудиообъекта, созданного вами с этим звуком в качестве источника. Затем при воспроизведении нового звука ищите в кеше все звуковые эффекты, которые закончили воспроизведение (свойство ended будет иметь значение true). Если вы найдете его, перемотайте его обратно в начало (currentTime = 0) и снова play(). В противном случае создайте объект new Audio() в кэше.

Поскольку лазерный звуковой эффект проигрывателя короткий, вместо создания 600 аудиообъектов в минуту будет только 3 или 4 циклических цикла. К сожалению, некоторые браузеры по-прежнему скачивают его 4 раза (Safari сделал это в последний раз, когда я проверял!) Или имеют высокую задержку first каждый раз, когда воспроизводится каждый звуковой буфер, но в конечном итоге браузер перехватывает, поскольку всегда используются одни и те же буферы. повторно. Так что в принципе звук может быть немного странным на несколько мгновений, а потом проясняется. Мы также используем кэш приложения HTML5, поэтому в следующий раз вы будете воспроизводить все, что загружается с диска, поэтому последующее воспроизведение должно сразу же работать хорошо.

Вот и все. Это все еще немного хитроумно с первой игрой со звуком HTML5, но каждый раз после этого должно быть довольно солидным, при условии, что браузер имеет разумную реализацию звука. Существует несколько способов клонировать аудиообъекты, но я обнаружил, что перемотка существующих аудиосистем лучше всего работает.

SoundManager или какие-либо запасные варианты на основе Flash / плагинов вообще отсутствуют, поскольку мы стремимся быть чистым HTML5.

Мы также поддерживаем аудио API, предоставляемые PhoneGap и appMobi для мобильных устройств, поскольку HTML5 аудио на мобильныхдаже не стоит пытатьсяТаким образом, наш аудио-движок объединяет в себе четыре аудио-API, и да, это похоже на беспорядок Франкенштейна, но это работает.

Вот и все.Полагаю, наши конкуренты это прочтут, но кого это волнует, когда будет ТАКОЕ представительство ??? 1111

...