HTML5 Audio и Game Development: баги браузеров, проблемы и их решения, идеи

    В топике я расскажу о нюансах использования тега <audio> в разных браузерах при разработке игр, о проблемах, с которыми я столкнулся и о том, как их решить. Объяснение будет идти паралельно с написанием обертки для удобной работы.


    Элемент Audio имеет очень красивый интерфейс, но нам его надо расширить, потому напишем обертку:
    var LibCanvasAudio = function (file) {
        
    this.audio = new Audio;
        
    this.audio.src file;
    };

    LibCanvasAudio.prototype = {};


    .ogg vs .mp3


    Для начала — муть с поддерживаемыми кодеками. Большинство браузеров поддерживает ogg vorbis(для Оперы в Линуксе не забудьте установить gstreamer base и good плагины), но, например, Apple решил выебнуться. Давайте для вменяемых браузеров будем отдавать в .ogg, всем остальным — в .mp3. Все звездочки в имени файла будем заменять на ogg или mp3 соответственно:

    var LibCanvasAudio = function (file) {
        
    this.audio = new Audio;
        
    this.src(file);
    };

    LibCanvasAudio.prototype = {
        
    src : function (file) {
            var 
    codec this.getSupport();
            if (!
    codec) throw 'AudioNotSupported';
            
    this.audio.src file.replace(/\*/gthis.getSupport());
            
    this.audio.load();
            return 
    this;
        },
        
    getSupport : function () {
            return !
    this.audio.canPlayType false :
                
    this.audio.canPlayType('audio/ogg;')  ? 'ogg' :
                
    this.audio.canPlayType('audio/mpeg;') ? 'mp3' false;
        }
    }



    Схема Гатлинга


    Хорошо. Мы подошли к главной теме. Допустим, мы разрабатываем экшн. У нас огромное количество взрывов, выстрелов, етс. Допустим, один взрыв с эхо длится 5 секунд, а интервал между взрывами может быть 0.5 секунд. Если просто запускать файл сначала, то предыдущий взрыв резко оборвется. Мы могли бы клонировать элемент Audio каждый раз перед запуском, но так мы будем плодить кучу DOM-элементов. Прибилизительно через 5 минут игры все браузеры сходят с ума. Потому предлагаю воспользоваться схемой Гатлинга. Заносим определенное количество элементов в массив и вызываем их по-очереди. Пока сыграет последний элемент первый успеет закончиться. Главное — выставить достаточно количество «стволов» для каждого из звуков.

    LibCanvasAudio.prototype = {
        
    // ...
        
    cloneAudio : function () {
            
    audioClone this.audio.cloneNode(true);
            
    audioClone.load();
            return 
    audioClone;
        },
        
    gatling : function (count) {
            
    this.barrels = [];
            
    this.gatIndex =  0;
            while (
    count--) {
                
    this.barrels.push(this.cloneAudio());
            }
            return 
    this;
        },
        
    getNext : function () {
            var 
    elem this.barrels[this.gatIndex];
            ++
    this.gatIndex >= this.barrels.length && (this.gatIndex 0);
            return 
    elem;
        },
        
    playNext : function () {
            var 
    elem this.getNext();
            
    elem.pause();
            
    elem.currentTime 0;
            
    elem.play();
            return 
    this;
        }
    };



    Интерфейс у нас получается приблизительно такой:
    var shotSound = new LibCanvasAudio('explosion.*').gatling(6);

    window.addEventListener('keydown', function (e) {
        (
    e.keyCode == keys.SPACE) && shotSound.playNext();
    }, 
    false);


    Облом в Опере


    В Опере нас ждёт облом. Детально изучив этот вопрос нашел баг, который я зарепортил с кодом DSK-309302. Клонированный элемент Аудио в Опере не работает:

    // var audioOrig   = document.createElement('audio'); // аналогично с:
    var audioOrig      = new Audio();
    audioOrig.src      'shot.ogg';
    audioOrig.controls 'controls';

    var audioClone audioOrig.cloneNode(true);

    function 
    appendToBody (node) {
        
    document.getElementsByTagName('body')[0].appendChild(node);
    }

    audioOrig.play(); // работает
    audioClone.play(); // не работает в Опере

    appendToBody(audioOrig);  // работает
    appendToBody(audioClone); // не работает в Опере


    Напишем небольшой фикс для Оперы:
    LibCanvasAudio.prototype = {
        
    // ..
        
    cloneAudio : function () {
            if (
    window.opera) { // Reported Opera bug DSK-309302
                
    var audioClone = new Audio;
                
    audioClone.src this.audio.src;
            } else {
                
    audioClone this.audio.cloneNode(true);
            }
            
    audioClone.load();
            return 
    audioClone;
        },
        
    // ..
    };


    Баг в Фоксе


    Другой баг мы можем наблюдать в firefox 3.5 (в 3.6 и 4 уже нету) — при повторном воспроизведении аудиотрека первая секунда± — дублируется. Судя по всему, не только у меня: «the second time you hit the button it plays the “badumm” twice in Firefox». (видео с записью бага). Добавим небольшой фикс — будем отматывать аудио не в начало, а на 25 миллисекунду (минимальное значение установленно экспериментально и равно приблизительно 0.021-0.022 секунды). При желании можно добавить проверку версии и всех кроме 3.5 фокса возвращать в начало (но разница между 25 миллисекундой и нулевой не ощущается, в крайнем случае, зная про этот нюанс можно всё аудио отодвинуть в любимом аудиоредакторе на 25 миллисекунд влево):

    LibCanvasAudio.prototype = {
        
    // ..
        
    playNext : function () {
            var 
    elem this.getNext();
            
    elem.pause();
            
    elem.currentTime 0.025;
            
    elem.play();
            return 
    this;
        }
    };


    Бонус


    В ie9 preview 4 не работает new Audio(), но это очень просто решить, заменив его на document.createElement('audio');

    Что получилось в итоге (тыкать в пробел)


    Исходник, получившийся в результате: pastebin.com/xG4mhX3w
    Поделиться публикацией
    Похожие публикации
    Ой, у вас баннер убежал!

    Ну. И что?
    Реклама
    Комментарии 84
      –17
      автору респект, но на флэш бы это сделалось за минуту.
      Почитав такое кстати понимаешь какую работу проделали в адобе, и насколко все удобно.
        +2
        И глючило/тормозило бы на не-win-ных платформах)
        • НЛО прилетело и опубликовало эту надпись здесь
            +8
            зависит. флеш в не-винде тормозит и потребляет в разы больше ресурсов. в макоси — флеш самая частая причина того, что ноутбук начинает изо всех сил реветь вентиляторами.
            в линуксах до сих пор актуальна проблема кодировок.
              +2
              В 10.1 кажеться пофиксили проблему кодировки в линукс.
                +1
                В винде он часто ведёт себя не лучше
                • НЛО прилетело и опубликовало эту надпись здесь
                    0
                    а с чего ты решил, что я на линуксе? я на нормальной ос.
                    • НЛО прилетело и опубликовало эту надпись здесь
                      0
                      И что же не нормального в линукс?
                      0
                      WHAT?

                      Стоит отметить, что насладиться благами HTML 5 получится не во всех браузерах. В настоящее время поддержку пятой спецификации HTML осуществляют только Google Chrome, Apple Safari и Internet Explorer от Microsoft – правда, на «допинге» в виде бесплатного плагина Google Chrome Frame.
                  • НЛО прилетело и опубликовало эту надпись здесь
                    +5
                    У Флеша одно преимущество — время, которое он развивался. За html5 ещё никто серъёзно не брался, потому всё выглядит сыроватым.

                    Работа с аудио в html5 вполне логична и удобна, особенно учитывая тот факт, что она предназначена для других целей. А с появлением этого топика стало одной проблемой меньше.

                    Я сейчас работаю над тем, чтобы разработка на html5 была настолько же, а то и более удобной, чем на Флеше. Следите за развитием фреймворка LibCanvas)

                    Описанное в топике решение будет заключено в прозрачную обёртку и, возможно, никто кроме меня с этой проблемой больше не столкнётся)

                    На то это и открытые технологии, чтобы мы их все дружно совершенствовали)
                      –1
                      у HTML тоже есть свое преимущество — количество высококлассных специалистов, которые работают над ним в данный момент в уважаемых всеми компаниях. У адоби, увы, с людскими ресурсами очень все печально…
                      В чем действительно плюс флеша — средства разработки.
                        –1
                        вы немного все попутали
                          0
                          в чем же?
                          –1
                          Поддерживаю Cher. Специалистов по html5. В первую очередь реальных специалистов по тегу «Канвас» мизерное количество. Очень малое количество людей представляет, как с ним работать. И скудный выбор решений на нем — тому доказательство. Пока что замкнутый круг, когда люди боятся приблизится к технологии, потому что надо приблизится, чтобы понять, что боятся нечего
                            0
                            речь идет не о разработчиках, применяющих html5, а о тех людях, которые трудятся над созданием браузеров и количестве денег, инвестируемых компаниями гугль, эппл, мозилла, опера, майкрософт в эти новые технологии.
                            Увы, но адоби тут выглядит в роли пигмея, не более.
                          0
                          За html5 ещё никто серъёзно не брался, потому всё выглядит сыроватым.

                          За html5 никто серьезно не брался лишь потому, что html это язык разметки и давать ему standalone возможности просто никому не надо. Для этого есть более подходящие технологии. Просто слишком много верстальщиков развелось, которые возомнили себя разработчиками с большой буквы. А на деле они просто в src меняют путь к файлу и бьют себя в грудь на тему «за то не флеш». Кстати. С одним говорил почему он ненавидит флеш — ответ был очевиден «а я его не умею».
                          0
                          Ну так не будет никто писать велосипеды.
                          Да и технология новая.
                          0
                          И это всё чтобы просто проиграть звук?
                          Я не фанат Флеша, но если сравнивать… Как то разработка на HTML5 не радужно выглядит.
                            +3
                            Поддержка браузерами с течением времени будет улучшаться, баги — фикситься.
                              +6
                              Просто не хочется состариться раньше, чем это начнёт работать.

                              P.S.:
                              Умиляют появляющиеся минусы у моего сообщения. Господа с HTML5 головного мозга, не мне надо минусы ставить, а платформу для разработки делать лучше.
                                +1
                                Это же хабр :) Мне в топике про флэш товарищи с флэшем головного мозга тоже минусов наставили и в карму насрали.
                                  +7
                                  Вот так и ходим все обос*анные :D
                                    0
                                    пофиг
                                    а вообще реквестирую кнопку скрыть рейтинги и карму!!! вообще и везде

                                    ЗЫ «Вы не можете комментировать чаще, чем 1 раз в 5 минут» гыгы
                                  0
                                  Так пользуйтесь Flash, вам же никто не мешает!
                                    +2
                                    Не состаритесь, я еще прекрасно помню как только «макромедиа флеш» начал появляться и мы активно обсуждали под него возможность вирусов, а вот уже и говорят об закате флеша и новой звезде — html 5. А прошло-то всего ничего.
                                    0
                                    Конечно! Особенно в iOS9 «улучшили» web audio :D Еще пару таких «улучшений» и разработчики на html5 будут ругать не только флеш, но этот самый html5
                                    +1
                                    Смотрите верхнюю ветку)
                                    0
                                    Вообще — отлично бы просто сделать и выложить библиотеку для работы со звуком.
                                    +2
                                    ff 3.6.8
                                    первый взрыв (в полной тишине) звучит громче, чем смешиваемый с другими.
                                      0
                                      То же самое и в FF 4b2
                                      –1
                                      хабр сегодня определённо торт!

                                      надвигающийся парад планет так действует?
                                        +2
                                        зы:
                                        в хромоклоне при первой загрузке не звучит первый выстрел о_О
                                        для остальных наблюдется некая задержка между нажатием и звуком, в сравнении с фф401

                                        и можно ли где-нить ознакомится с другими работами с хтмл5? тег, например, работа с графикой в канвасе итп
                                          +3
                                          у меня в блоге последних штук семь статтей)): theshock.habrahabr.ru/blog/
                                          плюс очень скоро я запущу кое-что серьезное на Канвасе. Возможно, в понедельник)
                                            0
                                            спсб, почитаю в выходные
                                              0
                                              мне показалось, или этот человек habrahabr.ru/blogs/javascript/98929/ делает тоже самое? может, вам скооперироваться?
                                                +1
                                                исходников Езбозы я так и не видел, но создается впечатление, что это фреймворк другого уровня по сравнению с LibCanvas. Но конкуренция — это всегда хорошо)
                                              +1
                                              да и примеров с канвасом в сети уже очень много ;)
                                                0
                                                … тег video, например…
                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                +1
                                                Скорее всего, оно просто не догрузилось. Далее должно быть стабильно. Нюанс с обработкой того загружено ли аудио в топик решил не включать.

                                                п.с. Какой браузер?
                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                    +1
                                                    пофиксил кое-чего
                                                    теперь оно будет писать, что не загрузило. в приложении надо дождаться загрузки всего аудио. ну или первое время чтобы человек посидел в тишине, смотря что важнее
                                                +1
                                                Страшная ссылка, очень громкая. Осторожно пипл )
                                                  0
                                                  В мозилле надо вешать не keydown, а keypress, чтобы она сама повторяла это событие, когда зажимаешь кнопку :). Сам с этим замучался…
                                                    0
                                                    А причем тут мозилла? Оно так в принципе работает, хоть в мозилее, хоть в ВинАпи.
                                                      0
                                                      Остальные браузеры (в Опере не проверял, каюсь) не посылают событие keypress для, к примеру, стрелочек :)
                                                      0
                                                      у меня в никсах при кейдаун срабатывает много раз при зажатой кнопке.) в винде это не так?
                                                        0
                                                        В моей макоси это не так… Хм… :)
                                                      +3
                                                      А миленько и познавательно) Я хоть сам флешер, но скажу что выглядит это все довольно приятно, разве что костыли под отдельные браузеры пока удручают (
                                                        0
                                                        Очень интересно, как раз недавно смотрел на проект www.schillmania.com/projects/soundmanager2/ (Проект универсальный плеера, который пытается объединить под общее API доступ к Audio как через Flash, так и через HTML5).
                                                          –1
                                                          например, Apple решил выебнуться

                                                          Мат в статье — это теперь так модно?
                                                            0
                                                            Я пишу не то, что модно, а то, что я думаю
                                                            Или вас задело, что это было в сторону Apple?)
                                                              0
                                                              Наоборот, порадовало (обратите внимание на мой аватар). Просто мат не люблю.
                                                            0
                                                            Мне тут пишут, что DSK-309302 (клонирование аудио-ноды) вполне себе работает в Opera 10.61 под Windows.
                                                            Вы на какой платформе проверяли?
                                                              0
                                                              Версия: 10.60 Internal
                                                              Сборка: 6386
                                                              Платформа: Linux
                                                              Система: i686, 2.6.31.12-0.2-default
                                                                0
                                                                последняя в репах
                                                                0
                                                                По крайней мере, в такой конфигурации не работает:

                                                                Версия:
                                                                10.60

                                                                Сборка:
                                                                3445

                                                                Платформа:
                                                                Win32

                                                                Система:
                                                                Windows XP
                                                                +1
                                                                если упасть головой на пробел и так и лежать, то у меня Fx 4.0 b4pre съедает все ресурсы процессора.
                                                                  –6
                                                                  Чувак, просто тебе нужно решить — ты либо занимешься бизнесом, либо популизмом. Если тебе важно чтобы три калеки на хабре тебе похлопали — тогда твой тернистый путь лежит через ХТМЛ5. Если тебе нужно сделать массовый продукт, то здесь флешу нет альтернативы. Некоторые перцы доходят до такого маразма, что делают сайт, который без флеша не работать не может, обернув его целиком в ХТМЛ, скрывая наличие флеша. Сила общественного мнения.
                                                                    0
                                                                    долго втыкал в фразу «без флеша не работать не может»
                                                                      0
                                                                      Одно «не» лишнее.
                                                                      +1
                                                                      Чувак, просто тебе нужно решить — ты либо занимешься бизнесом, либо популизмом

                                                                      ёу, чувак, я вижу ты риальна шаришь в бизнесе. но вот тебе мой совет, мэн. успевай следить за новыми тенденциями! через лет 5 про Флеш в вебе будут вспоминать как щас вспоминают Джава Апплеты. И рулить будет хтмл5. Смотри за новостями и будь на волне — и тебя будут считать уважаемым пацаном, а не лохом.
                                                                        –2
                                                                        Лохом бы я назвал человека — руководствующегося в своих действиях не здравым смыслом, а мнением окружающих, которые не являются ни большинством, ни целевой аудиторией. Про «через 5 лет» даже комментировать утомительно.
                                                                          +2
                                                                          не комментируй)
                                                                          +1
                                                                          Ну не нужно так загонять флеш ) Он будет жить и цвести в своей сфере — уйдет в игрушки и всякие мультимедиа фишечки, и встраивать его будут в сайты на хтмл5 :)
                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                          +1
                                                                          К чему вы это?)
                                                                            0
                                                                            Жара, дым… перегрелся человек.
                                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                          –2
                                                                          а как все здорово начиналось… свобода! открытые технологии! флеш не нужен! ВНЕЗАПНО костыли…
                                                                            +1
                                                                            а где без костылей? неужели программисты так много получают за легкое и очевидное программирование?
                                                                              0
                                                                              то есть по вашему сложность программирования оценивается количеством костылей?

                                                                              >а где без костылей?
                                                                              есть места)
                                                                                0
                                                                                костыли штуки неприятные и нервные. сложную задачу решать интересно. решать задачу, в которой надо прибегать к костылям — неинтересно и нервно
                                                                            0
                                                                            Just for your information: Тэг не поддерживается браузером в Андроеде. Хотя webkit-based.
                                                                              0
                                                                              А что вы хотели?! HTML5 это свобода от проприетарных технологий! Это всем миром к светлому будущему! Скоро WebGL еще подтянется и все все игры на фейсбуке будут только на этих технологиях!!! Счастье в каждый дом!
                                                                                0
                                                                                Не знаю чего хотели другие, но мне хотелось, что бы стабильно и одинаково работали приложения в браузерах и при этом иметь полноценный ЯП на котором эти приложения будут написаны с качественными ИДЕ и другими средствами разработки. В данный момент ни стабильности ни внятного кодопроизводства у хтмл5 не наблюдается. Самый простой способ проиграть звук во флеше выглядит вот так:
                                                                                var sound:MySound = new MySound();
                                                                                sound.play();

                                                                                И это работает везде одинаково,- на мобилах, бразуере, десктопах(мак/вин). Так же как и работает все остальное в 99.9% процентах случаев.

                                                                                Я за развитие технологий и с удовольствием перейду на более удобную и производительную кроссплатформенную систему для создания игр и мобильных приложений, но хтмл5 в данный момент не может предложить ни стабильности ни полноценного объектно-ориентированного ЯП со всеми плюшками. При этом я не отрицаю что можно на нем писать, к примеру, игры. Вопрос в удобстве, человеко-часах, поддерживаемости, стабильности и количестве костылей необходимых чтобы это все заводилось и не падало при выходе новой версии браузера.
                                                                                Флеш активно развивается, появляются новые движки, комьюнити растет, со стороны Адоба тоже есть подвижки, так что, пока не будет достойной альтернативы буду продолжать разработку на ас3, а там и видно будет.
                                                                                0
                                                                                Или таки это был сарказм? =D
                                                                                (к комментарию выше)
                                                                                  0
                                                                                  Сарказм конечно же )))
                                                                                  0
                                                                                  Оказалось, что данная статья появилась тут в августе 2010. А проблемы многие не решились и в 2015 :)

                                                                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                                  Самое читаемое