Веб аудио оффлайн в Safari под iOS 6

Воспроизведение кешированного аудио в оффлайн режиме в Safari под iOS долгое время было настоящим испытанием, которое было признано недостижимой целью ^[1]. Но с приходом веб аудио API ^[2] (только в движках WebKit), это наконец-то стало возможным, несмотря на то, что вам все-равно придется сделать несколько шагов.

Плохая новость в том, что вы все равно не сможете кешировать mp3 файлы, используя кеш приложения ^[3] и просто загружать их используя XmlHttpRequest. Safari под iOS 6 будет кешировать mp3 файлы, но потом молча откажется воспроизводить их (очень полезно!)

Base64 идет на помощь

Благодаря тому, что веб аудио API предоставляет разработчикам прямой доступ к аудио буферу ^[4], вы можете изменять формат данных на лету и передавать их напрямую веб аудио API для воспроизведения. Например, если вы закодируете mp3 файл в base64 строку, то потом сможете его раскодировать в ArrayBuffer ^[5] и конвертировать сырые аудио данные.

Кодирование аудио файла

Вы можете легко конвертировать mp3 файл в base64 строку использую OpenSSL ^[6]. Если вы работаете под Mac OS X, где он предустановлен, просто откройте Terminal.app и введите следующую комманду:

openssl base64 -in [infile] -out [outfile]

Замените [infile] на путь к вашему mp3 файлу, а [outfile] на путь для сохранения закодированных данных.
Комманда сохранит, закодированное в base64 строке, представление аудио файла. Затем вы можете закешировать эту строку, используя любое веб хранилище на ваш выбор (например, кеш приложения ^[3], локальное хранилище ^[7] или webSQL ^[8])

Base64 в ArrayBuffer

Чтобы преобразовать base64 в ArrayBuffer, вам нужно использовать свое решение. Посмотрите решение base64-binary.js ^[9] Даниэля Гуерро(Daniele Guerrero). Это хороший скрипт, который создан специально для этой цели. Он преобразует base64 строку в Uint8Array ^[10] и сохраняет его в ArrayBuffer.
После этого вы можете просто декодировать аудио данные используя медо decodeAudioData() из веб аудио API.

var buff = Base64Binary.decodeArrayBuffer(sound);

myAudioContext.decodeAudioData(buff, function(audioData) {
  myBuffer = audioData;
});

После перекодировки аудио данных, передайте их на аудио буфер и воспроизведите звук:

mySource = myAudioContext.createBufferSource();
mySource.buffer = myBuffer;
mySource.connect(myAudioContext.destination);
mySource.noteOn(0);

Демо и исходный код

Посмотрите онлайн демонстрацию ^[11] и исходный код ^[12] с дополнительными примерами использования техники из данной статьи.

Поддержка браузеров

Представленные демо работают под Safari 6, Chrome Desktop и Safari под iOS6. Техника, потенциально, может работать в любом браузере, который поддерживает веб аудио API, поэтому, надеемся, Chrome Mobile скоро добавить ее поддержку.
На данный момент, W3C продвигает веб аудио API как стандарт ^[13].

Автор: druf

Источник ^[14]