Преодоление ограничений HTML5 при работе с аудио в iOS

Решения и рецепты для мобильного браузера Safari

Несмотря на обширные возможности аудио в HTML5, спецификация все еще развивается и имеет множество ограничений, а мобильная версия браузера Safari - еще больше. В этой статье рассматриваются ограничения HTML5, присутствующие в мобильной версии Safari. Приводятся рабочие примеры, предлагающие решения и комплексные обходные подходы к устранению ограничений. Узнайте о преимуществах использования аудиоспрайтов в мобильном браузере Safari и опробуйте несколько уникальных решений для обхода всех ограничений HTML5 в iOS.

Аарон Глодж, инженер по разработке ПО, The Nerdery

Photo of Aaron GloegeАарон Глодж (Aaron Gloege) обнаружил свою страсть к программированию в 2006 году. После курсов веб-разработки в колледже Брауна он посвятил свое свободное время самообразованию, став гуру-самоучкой в области JavaScript, iOS и PHP. Закончив колледж Брауна в 2007 году и получив диплом о двухгодичном образовании в области визуальных коммуникаций, Аарон поступил на работу в ведущую компанию по интерактивным и веб-разработкам Greatapes/MediaXpress. В начале 2011 года Аарон стал инженером по программным разработкам в компании The Nerdery, где быстро приобрел репутацию талантливого разработчика, а также надежного и проверенного члена команды и руководителя проектов.



05.06.2013

Введение

На протяжении уже нескольких лет разработчики создают полноценные интерактивные среды, работающие, с теми или иными оговорками, непосредственно в браузерах. Для таких сайтов обычно требуется наличие плагинов для браузера (Flash). Интерактивные среды представляются идеальным решением для получающих все большее распространение смартфонов и планшетов. При этом, в связи с ограниченной производительностью процессоров мобильных устройств, плагины для браузеров больше не являются жизнеспособной платформой для разработки.

Часто используемые аббревиатуры

  • AAC: Advanced Audio Coding
  • CSS: Cascading Style Sheet
  • HTML: HyperText Markup Language
  • MP3: MPEG-1 Audio Layer 3
  • OGG: An open container format
  • WAV: Waveform Audio Format

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

Спецификация HTML5 audio предоставляет мощные инструменты для интеграции звука в браузер, особенно на мобильных устройствах, например, в мобильной версии браузера Safari в iOS. Хотя HTML5 audio является новой функцией, она уже поддерживается в iOS. По данным разработчика популярного мобильного приложения Instapaper, 98,8% пользователей этого приложения под iOS в ноябре 2011 года работали как минимум на iOS 4 (см. раздел Ресурсы). Поскольку поддержка HTML5 audio была введена в мобильной версии Safari в iOS 3, вы можете быть уверены в том, что поддержка HTML5 audio на платформе iOS является практически повсеместной.

В этой статье вы сможете узнать об ограничениях HTML5 в настольной и мобильной версиях Safari, а также попробовать некоторые решения для создания интерактивных звуковых эффектов. Мы также рассмотрим неподдерживаемые события, аудиоспрайты, а также методы использования directCanvas и multiSound для повышения производительности игр в HTML5.

Важно отметить, что Apple реализовала в iOS 6 поддержку API Web Audio (мы обсудим его далее), который исключает необходимость во многих приемах, описанных в данной статье. Однако iOS 6 была представлена всего несколько недель назад, и iOS 5 все еще доминирует на рынке. Для нее приведенные в данном материале методы все еще актуальны и должны учитываться, если вы разрабатываете аудио приложения для мобильного браузера Safari.

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


Ограничения HTML5 audio

Перед тем как начать разговор об ограничениях мобильного браузера Safari, важно разобраться с ограничениями HTML audio для настольных систем. Спецификация HTML5 audio может быть и мощной, и ограниченной в зависимости от реализации. Она хорошо работает в музыкальных плеерах и при воспроизведении простых звуковых эффектов, но при этом оставляет желать лучшего, когда речь идет о сложных звуковых приложениях, таких как игры.

Поддержка форматов

К сожалению, не все браузеры поддерживают одни и те же форматы аудиофайлов. Как вы можете видеть в таблице 1, на сегодня используется четыре основных формата: MP3, OGG, WAV и AAC.

Таблица 1. Форматы аудио в HTML5
Ogg VorbisWAVPCMAAC
Internet Explorer 9XX
FirefoxXX
Chrome/Safari/mobile SafariXXX

Чтобы обеспечить работу во всех браузерах, лучше всего иметь все аудиопотоки в двух форматах — Ogg Vorbis и AAC.

Почему мы не включили в перечень MP3? MP3 требует значительных лицензионных выплат, если вы используете этот формат в коммерческих целях. Лицензия на MP3 предусматривает выплаты в размере 2% от дохода, превышающего 100 тыс. долларов (см. Ресурсы). Именно поэтому я предпочитаю использовать AAC вместо MP3. AAC также не свободен от лицензионных отчислений, но его лицензионные условия позволяют распространять звукозаписи бесплатно. AAC также обеспечивает лучший уровень сжатия, что позволяет использовать файлы меньшего размера —а это большое счастье в мире Интернета (см. Ресурсы).

Ogg Vorbis с моей точки зрения является безусловным фаворитом, так как это открытый формат без патентных платежей и лицензий. Однако он поддерживается только в Firefox.

В листинге 1 показан пример HTML-разметки, обеспечивающей кросс-браузерную совместимость.

Листинг 1. Разметка HTML для аудиоэлемента
<audio>
    // AAC file (Chrome/Safari/IE9)
    <source src="sound.m4a" type="audio/mpeg" />
    // Ogg Vorbis (Firefox)
    <source src="sound.ogg" type="audio/ogg" />
</audio>

Манипуляции и эффекты

При работе с аудиоданными важно получить возможность манипуляций со звуком. В HTML5 audio какие-либо возможности для манипуляций отсутствуют - идет ли речь о синтезе звука «на лету», о наложении звуковых эффектов, моделировании звуковой среды или даже выполнении простого стереопанорамирования. Вы можете воспроизвести только тот звук, который загрузили.

Web Audio API (Chrome) и Audio Data API (Firefox) помогают скомпенсировать нехватку возможностей, предоставляя вам необходимые инструменты для синтеза и обработки аудио «на лету» без использования плагинов к браузеру (см. Ресурсы). BОба API в настоящее время находятся в стадии разработки и поддерживаются только в Chrome 14+ и Firefox 4+. К сожалению, они также достаточно сложны в работе. Существуют также прекрасные библиотеки для поддержки нормализации, включая audiolibjs (см. Ресурсы). Chrome Web Audio API продвигается в W3C в качестве стандарта

Комбинирование одноголосных звуков (полифония)

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


iOS, мобильный браузер Safari и ограничения HTML5 audio

Стандарт HTML5 audio сам по себе имеет определенные ограничения, а мобильная версия Safari только добавляет еще один уровень ограничений даже для самых простых вариантов использования HTML5 audio.

Единичный аудиопоток

Одно из самых серьезных ограничений мобильной версии Safari состоит в том, что единовременно может воспроизводиться только один аудиопоток. Медиаэлементы HTML5 в mobile Safari являются синглтонами, поэтому может воспроизводиться лишь один поток HTML5 audio (и HTML5 video). Apple никак не объясняет причину этих ограничений, но можно предположить, что это сделано для снижения расходов на трафик для пользователей (так как именно это является причиной большинства других ограничений HTML5 в iOS).

iOS также позволяет мобильному Safari работать только с одним медиаконтейнером HTML5 (аудио либо видео). Если вы запустите на воспроизведение аудиопоток в то время, как в браузере проигрывается другой поток, предыдущий поток будет удален из контейнера, а его место займет новый.

В листинге 2 вы можете видеть, как вызов функции play() в то время, когда проигрывается другой поток, останавливает его воспроизведение (в данном случае audio1).

Листинг 2. Единственный аудиопоток
var audio1 = document.getElementById('audio1');
var audio2 = document.getElementById('audio2');
audio1.play(); // this stream will immediately stop when the next line is run
audio2.play(); // this will stop audio1

Посмотрите и оцените этот пример в действии.

Важно помнить, что видео и аудио являются взаимозаменяемыми. Если воспроизведение аудио начинается, когда проигрывается видео, последнее будет остановлено. Может воспроизводиться только один видео- или аудиопоток — это показано в листинге 3.

Листинг 3. Взаимозаменяемость видео- и аудиопотоков
var audio = document.getElementById('audio');
var video = document.getElementById('video');
video.play();

// at a later time
audio.play(); // this will stop video

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

Мобильная версия Safari не поддерживает автоматический запуск воспроизведения аудиофайлов при загрузке страницы. Файлы могут быть запущены только в результате пользовательского действия (прикосновения к экрану). При наличии атрибута autoplay в разметке HTML мобильный Safari просто проигнорирует его, не воспроизводя звук при загрузкe:

<audio id="audio" src="audio_file.mp3" autoplay></audio>

В руководстве для разработчиков Safari Developer Guide приведена дополнительная информация по этому вопросу (см. Ресурсы).

Загрузка аудио

Аудиопотоки не загружаются, пока не будет совершено то или иное действие пользователя, например onmousedown, onmouseup, onclick или ontouchstart. На рисунке 1 показан пример такого поведения.

Рисунок 1. Действия для загрузки аудио в мобильном Safari
Workflow to load audio in mobile Safari

Если код из листинга 4 будет запущен при открытии страницы, в мобильной версии Safari аудиопоток не будет запущен и даже не будет загружен.

Листинг 4. Воспроизведение аудиопотока при загрузке страницы просто игнорируется.
var audio = document.getElementById('audio');
audio.play();

Даже если HTML-код содержит атрибуты для предварительной загрузки, мобильный Safari проигнорирует их и не станет подгружать файл, пока действие не будет подтверждено пользователем путем прикосновения к экрану, как это показано в листинге 5.

Листинг 5. Атрибут предварительной загрузки не поддерживается в мобильном Safari
<audio id="audio" src="audio_file.mp3" 
preload="auto"></audio>

Посмотрите и оцените этот пример в действии.

В настольной версии Safari код из листинга 5 загрузит аудиофайл при открытии страницы. Однако в мобильной версии Safari атрибут будет проигнорирован, и аудиофайл не будет загружен.

Другие особенности

Есть и другие особенности, которые следует учитывать при использовании HTML5 audio в мобильном Safari.

При инициализации нового аудиопотока возникает задержка в несколько секунд, связанная с созданием нового аудиообъекта в iOS. В листинге 6 показано, как увидеть эту задержку.

Листинг 6. Задержка HTML5 audio при переключении между аудиообъектами
var audio1 = document.getElementById('audio1');
var audio2 = document.getElementById('audio2');
audio1.play();

// позже
audio2.play(); 
// наблюдается задержка в несколько секунд из-за создания нового аудиообъекта в iOS. 

// еще позже
audio1.play(); // Дело в том, что под iOS объект audio1 уничтожается, 
// когда запускается audio2.

Посмотрите и оцените этот пример в действии.

Важно убедиться в том, что логика вашего кода не требует загрузки потоков при открытии страницы. Ведь если функция play() просто будет тихо пропущена, попытка установить атрибут currentTime на аудиопотоке, который должен был быть загружен, включая его метаданные, приведет к появлению фатальной ошибки, как показано в листинге 7.

Установка currentTime для аудиопотока, к которому не были загружены метаданные.
// запускается при загрузке страницы
var audio = document.getElementById('audio');
audio.play(); // Эта функция будет просто пропущена
audio.currentTime = 2; // Эта функция вызовет фатальную ошибку из-за отсутствия метаданных
// для аудио, которого не существует

Посмотрите и оцените этот пример в действии.

Аудиофайлы нельзя кэшировать в мобильном манифесте на iOS. Выполнение такого действия возможно, только если речь идет о манифесте для веб-приложения, работающего автономно. Если аудиофайл будет включен в этот манифест, iOS просто проигнорирует его и не будет кэшировать. Каждый раз, когда приложению нужно будет получить доступ к аудиофайлу, он должен быть запрошен из сети.

Мобильный браузер Safari не распознает значения volume и playbackRate, устанавливаемые при помощи JavaScript. Изменение этих атрибутов в действительности не меняет сами значения. Параметр громкости звука (volume) всегда контролируется только пользователем, а playbackRate попросту не поддерживается в мобильном Safari. В частности, volume всегда будет равен 1, а playbackRate можно присвоить любое значение, но реальная скорость воспроизведения от него никак не зависит. Все это создает определенные сложности при работе с событием onratechange, которые мы обсудим в разделе Неподдерживаемые события.

До версии iOS 5 атрибут loop также не существовал. Чтобы обойти этот недостаток поддержки, можно добавить прослушиватель события onended и поместить вызов play() в него. Пример приведен в листинге 8.

Листинг 8. Зацикливание аудио в iOS < 5
var audio = document.getElementById('audio');
audio.play();

var onEnded = function() {
    this.play();
};

audio.addEventListener('ended', onEnded, false);

Посмотрите и оцените этот пример в действии.


Решения

Выбор решения для преодоления ограничений HTML5 audio в мобильном Safari и полностью зависит от применения. Если вам необходимо лишь проигрывать один аудиофайл или список файлов, нужно будет сделать не так уж много. Однако если вам нужны интерактивные звуковые эффекты, все становится значительно сложнее.

Единственный аудиопоток

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

Листинг 9. Замена источника аудиообъекта
var audio = document.getElementById('audio');
audio.play();

// где-то позже в вашем коде (не обязательно связано с событием прикосновения 
// пользователя к экрану)
audio.src = 'newfile.m4a';
audio.play(); // будет присутствовать небольшая задержка при загрузке нового файла

Посмотрите и оцените этот пример в действии.

Более качественным методом решения проблемы одного потока является использование аудиоспрайтов. Проще говоря, вы можете скомбинировать все ваши звуки в один поток и проигрывать отдельные его элементы. Аудиоспрайты требуют более подробного разбора.

Автовоспроизведение

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

До выхода iOS 4.2.1 можно было загрузить аудиофайл при помощи обратного вызова (callback) или синхронного вызова Ajax, как это показано в листинге 10.

Листинг 10. Загрузка аудиопотока при помощи обратного вызова или вызова Ajax на iOS 4.2.1 и старше
// Запускается на загружаемой странице
var audio = document.getElementById('audio');

jQuery.ajax({
    url: 'ajax.js',
    async: false,
    success: function() {
        audio.play(); // audio will play in iOS before 4.2.1
    }
});

Прослушайте этот пример в действии.

Но в методе, описанном в листинге 10, существует изъян: мы используем синхронный вызов Ajax, а это значит, что браузер остается недоступным, пока вызов не будет завершен. В случае с мобильным Safari блокируется не только активная страница, но и весь браузер целиком. Если же возникает ошибка и mobile Safari остается в заблокированном состоянии (что нежелательно), единственным выходом остается нажатие клавиши «домой» и принудительное завершение приложения.

Впрочем, Apple закрыла эту возможность в iOS 4.2.1, так что метод не работает на устройствах с ОС iOS 4.2.1 и всеми более новыми версиями.

Загрузка аудио

Аудиопотоки не могут быть загружены без действий пользователя. Как показано в листинге 11, события onmousedown, onmouseup, onclick и ontouchstart подходят для того, чтобы успешно загрузить аудиопоток при использовании обратного вызова. Обратите внимание, что мы говорим о загрузке аудиофайла; вызов функции play() после того, как файл будет загружен, сработает как должно.

Листинг 11. Использование пользовательских событий для загрузки аудиопотока
// Запускается при загрузке страницы
var button = document.getElementById('button');
var audio = document.getElementById('audio');

var onClick = function() {
    audio.play(); // audio will load and then play
};

button.addEventListener('click', onClick, false);

Посмотрите и прослушайте этот пример в действии.

На первый взгляд может показаться, что листинг 11 — это лишняя рутинная работа. Однако на практике он представляет собой лучший способ придать вашей игре интерактивные возможности уже на этапе загрузки заставки, как показано на рисунке 2, когда пользователю нужно нажать кнопку «Start» для запуска приложения. Когда он нажимает ее, вы можете воспользоваться возникающим событием для подгрузки необходимого в вашем проекте звука.

Изображение 2. Заставка в HTML5
Cut the Rope HTML5 splash screen

Неподдерживаемые события

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

В таблице 2 перечислены все обратные вызовы аудиоэлементов, а также указана их совместимость с настольной и мобильной версиями Safari. Результаты получены при помощи написанного автором отладчика событий HTML5 audio, который вы можете опробовать самостоятельно.

Таблица 2. Поддержка медиасобытий настольной и мобильной версиями Safari
СобытиеОписаниеНастольная версия Мобильная версия
abortБраузер прекращает загрузку медиафайла до ее окончанияXX
canplayБраузер может продолжить воспроизведение медиаданных, но оценивает, если воспроизведение уже начато, возможно ли воспроизведение медиаресурса до конца с данной скоростью без остановки для дополнительной буферизации контента. XX
canplaythroughБраузер оценивает, возможно ли воспроизведение медиаресурса до конца с текущей скоростью без остановки для дополнительной буферизации, если начать воспроизведение сейчас.XX
durationchangeИзменилось свойство duration.XX
emptiedСостояние сети медиаэлемента изменяется в NETWORK_EMPTY.XX
endedВоспроизведение остановилось в конце медиаресурса, свойство ended установлено в true.XX
errorПри получении медиаданных возникла ошибка. Свойство error позволяет получить текущую ошибку.XX
loadeddataБраузер впервые может воспроизвести медиаданные в текущей позиции воспроизведения.XX
loadedmetadataБраузер знает длительность и размеры медиаресурса.XX
loadstartБраузер начинает загрузку медиаданных.XX
pauseВоспроизведение приостанавливается после возврата метода pause.XX
playВоспроизведение начинается после возврата метода play.XX
playingНачинается воспроизведение.XX
progressБраузер получает медиаданные.XX
ratechangeМеняются свойства defaultPlaybackRate или playbackRate.XX (не должно возникать)
seekingСвойство seeking установлено в true и есть время для отправки данного события.XX*
seekedСвойство seeking установлено в false.XX*
stalledБраузер получает медиаданные, но их поступление прекратилось.XX
suspendБраузер приостанавливает загрузку медиаданных; медиаресурс полностью не загружен.XX
timeupdateВремя currentTime меняется в ходе обычного процесса воспроизведения или по другой причине.XX
volumechangeИзменяется свойство volume или muted.X
waitingБраузер останавливает воспроизведение в ожидании следующего кадра.XX

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

ratechange
Событие ratechange выдается каждый раз при смене значения playbackRate. Как уже говорилось, изменение скорости воспроизведения аудио- или видеопотока в мобильном Safari не поддерживается, так что событие playbackRate не должно возникать. Однако начиная с iOS 5.1.1 HTML5 audio будет выдавать событие ratechange несмотря на то, что реальная скорость воспроизведения не меняется.
volumechange
Значение volume не может быть установлено при помощи JavaScript, поэтому событие volumechange не возникает. Даже если пользователь меняет громкость на своем устройства при открытом окне мобильного Safari, это событие не выдается.
seeking/seeked
Мобильная версия Safari поддерживает события seeking и seeked только в ситуации, когда поиск происходит при помощи JavaScript, как показано в листинге 12. Если на экране отображаются встроенные элементы управления и пользователь ищет позицию при помощи ползунка, события seeking и seeked не возникают.
Листинг 12. Установка currentTime приведет к срабатыванию событий seeking и seeked
var audio = document.getElementById('audio');
audio.currentTime = 60; // здесь сработают события seeking и seeked

Аудиоспрайты

Использование аудиоспрайтов представляется одним из наилучших решений для обхода препятствий к воспроизведению различных звуков в мобильном Safari. Аналогично спрайтам в CSS, звуковые спрайты комбинируют все ваши аудиоданные в один поток, как это показано на рисунке 3.

Рисунок 3. Аудиоспрайт
An audio sprite is several audio streams joined into a single stream

Принцип действия в данном случае крайне прост. Вам нужно сохранить данные каждого спрайта – начало, продолжительность или конец, а также идентификатор. Когда вы хотите воспроизвести определенный спрайт, нужно установить параметр currentTime аудиопотока на стартовую позицию и вызвать функцию play(). Пример приведен в листинге 13.

Листинг 13. Простой пример реализации аудиоспрайтов
// audioSprite уже загружен по касанию экрана пользователем
var audioSprite = document.getElementById('audio');
var spriteData = {
    meow1: {
        start: 0,
        length: 1.1
    },
    meow2: {
        start: 1.3,
        length: 1.1
    },
    whine: {
        start: 2.7,
        length: 0.8
    },
    purr: {
        start: 5,
        length: 5
    }
};

// воспроизведение спрайта meow2 
audioSprite.currentTime = spriteData.meow2.start;
audioSprite.play();

В результате выполнения кода из листинга 13 будет воспроизведен спрайт meow2. При этом, поскольку в программе не предусмотрено никакой логики для остановки после окончания спрайта, после него также будут воспроизведены спрайты whine и purr. Добавляя событие ontimeupdate, как в листинге 14, вы сможете контролировать параметр currentTime и остановить воспроизведение аудио по завершении спрайта.

Листинг 14. Добавочная логика для остановки потока по окончании спрайта
var handler = function() {
    if (this.currentTime >= spriteData.meow2.start + spriteData.meow2.length) {
        this.pause();
    }
};
audioSprite.addEventListener('timeupdate', handler, false);

Посмотреть и прослушать этот пример в действии.

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

Однако имейте в виду, что изменение currentTime не дает 100%-ной точности. Установка currentTime на позицию 6.5 секунды может привести к переходу на 6,7 или 6,2 секунды. Поэтому необходимо предусмотреть небольшие промежутки тишины между спрайтами, чтобы не попасть случайно на окончание другого спрайта. Внедрение этих пауз может привести к небольшим задержкам, например, если поток переходит на 6,4 секунды, когда спрайт начинается в 6,8 секунд.

Перед тем как использовать какие-либо спрайты, убедитесь в том, что весь аудиопоток загрузился. Это очень важно, потому что при отсутствии полной загрузки аудиопотока попытка обратиться к той части, которая еще не получена браузером, приведет к возникновению паузы на время, пока весь трек буферизуется.

Полнофункциональный пример

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


Как directCanvas и multiSound ускоряют производительность игр HTML5

Компания AppMobi разработала интересное решение, позволяющее обойти различные ограничения HTML5 на мобильных устройствах, используя directCanvas и multiSound (см. Ресурсы). directCanvas и multiSound используют встроенные возможности устройств, доступные для стандартных приложений, но реализуют их в браузере на базе HTML5. Невысокая производительность графики и ограничения, описанные в данной статье, перестают быть проблемой — вы получаете все преимущества написанного под конкретную платформу приложения.

Когда пользователь переходит на сайт, использующий directCanvas, страница предложит загрузить приложение MobiUs из App Store. Если приложение уже установлено, страница просто откроется в MobiUs.

На сайте AppMobi можно найти видеоролики, посвященные сравнению производительности приложений в браузере Safari и в MobiUs. Результаты оказываются поразительными, показывая прирост производительности до 10 раз, как вы можете видеть на рисунке 4.

Рисунок 4. Среднее улучшение производительности HTML5 при переходе с mobile Safari на MobiUs с directCanvas
A 4 column line graph showing percentage used

На сайте AppMobi есть превосходная документация по API, которая позволяет сразу начать работу со средой. SDK можно загрузить бесплатно. Также существует очень удобное расширение для Google Chrome, которое позволяет производить разработку в вашем настольном браузере.

И хотя это решение не идеально, так как оно требует от пользователя установки дополнительного приложения на устройство, AppMobi действительно предложила интересный подход, который стоит принять во внимание. На момент написания статьи приложение MobiUs было недоступно в App Store, но производитель заверил, что оно скоро появится снова.


Заключение

Несмотря на все ограничения, описанные в данной статье, HTML5 audio открывает множество новых возможностей для мобильного Safari, и вам определенно стоит использовать его преимущества. В этом материале вы узнали об ограничениях как настольной, так и мобильной версий Safari, познакомились с решениями существующих проблем и узнали о преимуществах использования аудиоспрайтов в мобильном Safari. Знание ограничений мобильного Safari поможет вам эффективнее работать с этим браузером.

Как развивающаяся спецификация, HTML5 audio, безусловно, будет становиться лучше, но нет никакой необходимости ждать финальной версии (появление которой ожидается к 2014 году). Практически повсеместная поддержка HTML5 audio в существующих версиях iOS является хорошим аргументом в пользу применения данной технологии.


Загрузка

ОписаниеИмяРазмер
Исходный код к статьеhtml5audio.article.source.zip4073 КБ

Ресурсы

Научиться

Получить продукты и технологии

  • audiolib.js: установите мощный набор инструментов для работы со звуком, созданный на базе JS.
  • directCanvas: загрузите directCanvas SDK — комплект технологий ускорения игр на HTML5, позволяющий решить ряд проблем HTML5.

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Web-архитектура
ArticleID=932757
ArticleTitle=Преодоление ограничений HTML5 при работе с аудио в iOS
publish-date=06052013