Кэширование аудио HTML 5 / QuickTime в Safari на iOS
Я отчаянно пытаюсь найти решение для веб-приложения, которое должно запускаться в iOS-Safari (например, на iPad, iPad2 и iPhone 4):
Это веб-приложение, которое я написал некоторое время назад, которое позволяет пользователям искать и слушать короткие музыкальные фрагменты (MP3, все от ~ 100 кБ до ~ 1,5 МБ). Аудиоплеер основан на Flash, поэтому на данный момент он не работает на устройствах iOS, и мне придется реализовать альтернативу либо в HTML 5, либо с «прямым» QuickTime-объектом.
Оба моих HTML 5- и QuickTime-альтернативы для iOS-устройств пока работают нормально, но есть одна серьезная проблема, для которой я не могу найти решения:
В отличие от Flash и большинства браузеров с поддержкой HTML 5 в Windows Safari на моем iPad 2 победил. • Сохранять аудиофайлы в кэше браузера после их загрузки и воспроизведения - ни с аудио-тегами HTML 5, ни с QuickTime-Object. Каждый раз, когда я загружаю аудиофайл для воспроизведения с сервера (с помощью команд JavaScript, без изменения или перезагрузки всей страницы), он полностью загружается снова.
Если пользователь слушает образец A, а затем образец B, Safari забыл о том, что я воспроизвел образец A и снова загрузил весь MP3, если я захочу его снова послушать. На мобильном устройстве с потенциально узкой полосой пропускания такое поведение исключено.
Есть ли способ сохранить загруженные аудиофайлы, открытые HTML 5 или QuickTime, в кеше Safari, чтобы он запомнил их уже загруженные - как обычно кэширует » веб-файлы, такие как HTML, CSS или JPEG-изображения, или как Flash хранит такие объекты в своем локальном кеше?
Моя первая попытка была попытаться использовать кеш приложения с файлом манифеста - хотя это не совсем предполагаемая цель для моего приложения ... У меня нет статического набора файлов, которые я хочу кэшировать или "доступными в автономном режиме" - я просто хочу кэшировать MP3, которые пользователь еще не воспроизвел.
Должно быть возможно использовать «динамический манифест»: тот, который анализируется модулем Apache PHP и перечисляет файлы, воспроизводимые так далеко от сеанса PHP - примерно так:
session_start();
header("Content-Type: text/cache-manifest, charset=UTF-8");
echo "CACHE MANIFEST\n";
foreach($_SESSION['playedSongs'] as $song)
{
echo $song."\n";
}
Поэтому всякий раз, когда песня загружается / воспроизводится, я мог получить доступ к сеансу PHP с AJAX, вставьте имя воспроизводимого файла и вручную обновите манифест с помощью ca lling window.applicationCache.update () или .swapCache ().
С этим связаны две проблемы:
Во-первых: это не работает. И я даже не дошел до попытки использовать динамический манифест:
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<title>Test</title>
<script type="text/javascript">
function playStuff(id)
{
if(id == 1)
{
window.document.getElementById("audio").innerHTML = '<audio controls preload="automatic" autobuffer><source src="song01.mp3" type="audio/mp3" /></audio>';
}
else if(id == 2)
{
window.document.getElementById("audio").innerHTML = '<audio controls preload="automatic" autobuffer><source src="song02.mp3" type="audio/mp3" /></audio>';
}
}
</script>
</head>
<body>
<div id="audio"></div><br />
<br />
<input type="button" value="playStuff(1)" onclick="playStuff(1)" />
<input type="button" value="playStuff(2)" onclick="playStuff(2)" />
</body>
</html>
cache.manifest выглядит так:
CACHE MANIFEST
song01.mp3
song02.mp3
и правильно возвращается из Apache как «текст / кеш-манифест» путем добавления
AddType text/cache-manifest manifest
] в .htaccess этого каталога.
Журналы Apache ясно показывают, что Safari (соответственно «AppleCoreMedia») не заботится о кеш-памяти приложения, когда дело касается аудио-файлов:
Сам Safari, кажется, подтвердите манифест и действительно предварительно загрузите файлы:
192.168.0.40 - - [23/Jul/2011:12:45:46 +0200] "GET /websql/index2.html HTTP/1.1" 200 2619 "-" "Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; de-de) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5"
192.168.0.40 - - [23/Jul/2011:12:45:46 +0200] "GET /websql/cache.manifest HTTP/1.1" 200 79 "-" "Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; de-de) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5"
192.168.0.40 - - [23/Jul/2011:12:45:46 +0200] "GET /websql/cache.manifest?%3E HTTP/1.1" 200 79 "-" "Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; de-de) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5"
192.168.0.40 - - [23/Jul/2011:12:45:46 +0200] "GET /websql/song02.mp3 HTTP/1.1" 200 120525 "-" "Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; de-de) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5"
192.168.0.40 - - [23/Jul/2011:12:45:46 +0200] "GET /websql/song01.mp3 HTTP/1.1" 200 120525 "-" "Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; de-de) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5"
До этого момента я ничего не делал, кроме открытия моего тестового приложения в Safari.
Воспроизведение song01.mp3:
192.168.0.40 - - [23/Jul/2011:12:47:25 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 2 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
192.168.0.40 - - [23/Jul/2011:12:47:25 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
192.168.0.40 - - [23/Jul/2011:12:47:25 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
192.168.0.40 - - [23/Jul/2011:12:47:25 +0200] "GET /websql/song01.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
192.168.0.40 - - [23/Jul/2011:12:47:25 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
192.168.0.40 - - [23/Jul/2011:12:47:29 +0200] "GET /websql/song01.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
192.168.0.40 - - [23/Jul/2011:12:47:29 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
Воспроизведение song2.mp3:
192.168.0.40 - - [23/Jul/2011:12:48:04 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 2 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
192.168.0.40 - - [23/Jul/2011:12:48:04 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
192.168.0.40 - - [23/Jul/2011:12:48:04 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
192.168.0.40 - - [23/Jul/2011:12:48:04 +0200] "GET /websql/song02.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
192.168.0.40 - - [23/Jul/2011:12:48:04 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
192.168.0.40 - - [23/Jul/2011:12:48:05 +0200] "GET /websql/song02.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
192.168.0.40 - - [23/Jul/2011:12:48:05 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
Воспроизведение song1. mp3 снова:
192.168.0.40 - - [23/Jul/2011:12:48:38 +0200] "GET /websql/song01.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
192.168.0.40 - - [23/Jul/2011:12:48:38 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
192.168.0.40 - - [23/Jul/2011:12:48:38 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
192.168.0.40 - - [23/Jul/2011:12:48:38 +0200] "GET /websql/song01.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
192.168.0.40 - - [23/Jul/2011:12:48:38 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
192.168.0.40 - - [23/Jul/2011:12:48:40 +0200] "GET /websql/song01.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
192.168.0.40 - - [23/Jul/2011:12:48:40 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
Повторное воспроизведение song2.mp3:
192.168.0.40 - - [23/Jul/2011:12:49:12 +0200] "GET /websql/song02.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
192.168.0.40 - - [23/Jul/2011:12:49:12 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
192.168.0.40 - - [23/Jul/2011:12:49:12 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
192.168.0.40 - - [23/Jul/2011:12:49:12 +0200] "GET /websql/song02.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
192.168.0.40 - - [23/Jul/2011:12:49:12 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
192.168.0.40 - - [23/Jul/2011:12:49:13 +0200] "GET /websql/song02.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
192.168.0.40 - - [23/Jul/2011:12:49:13 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"
Каждый файл полностью загружается при воспроизведении. Итак, «AppleCoreMedia» (что бы это ни было точно, плагин QuickTime, который запускается аудиоэлементом HTML 5, я полагаю?) Либо не имеет доступа к кэшу приложения, либо просто не понимает файлы в нем. . Поэтому, если я сейчас переключу свой iPad в «Авиарежим», Safari не сможет получить доступ / загрузить / воспроизвести файлы.
Я также пробовал использовать объект QuickTime вместо аудиотега HTML 5 (насколько мне известно Аудио и видео HTML 5 в Safari всегда используют QuickTime?) И управляют им примерно так:
document.movie1.SetURL('song02.mp3');
Ничего не меняется, это похоже на использование звука HTML 5, и все загружается снова при загрузке / воспроизведении.
И даже если это будет работать, все равно будет проблема:
Чтобы правильно реализовать это, мне нужно было бы загрузить MP3-файл в кэш приложения перед его воспроизведением. При этом кажется невозможным показать «реальный» прогресс: событие ProgressEvent, которое запускается из кэша приложения после обновления, похоже, не предоставляет никакой информации о загруженных на данный момент данных и полном размере файла. Это просто «Файл 1 из 2» и так далее,а не «реальный» прогресс, когда я мог бы определить что-то вроде: «загружено 100 кБ из 1,2 МБ», как я могу сделать с аудиоэлементом.
Все другие подходы к хранению, такие как веб-SQL / веб-база данных или локальное хранилище тоже не помогают:
Я не вижу никакого способа перенести данные MP3 в локальное хранилище или веб-базу данных и / или получить их снова для воспроизведения. Элемент Canvas HTML 5 имеет функцию toDataURL () для создания представления в кодировке Base64 и использования его для хранения - элемент Audio не имеет ничего подобного.
Мой последний действительно «грязный» подход пытался загрузить «вручную» файлы MP3 с кодировкой Base64 с помощью комбинации AJAX и PHP: PHP-скрипт выводит Base64-представление MP3-файла и загружается с помощью AJAX, поэтому я мог сохранить представление Base64, например в качестве локального хранилища или в веб-базе данных:
$infile = 'song01.mp3';
$contents = file_get_contents($infile);
$base64 = base64_encode($contents);
$audio = 'data:audio/mp3;base64,'.$base64;
echo $audio;
Я попытался использовать полученный текст ответа AJAX в качестве аргумента источника в теге источника звука. Сюрприз: это не работает в Safari на моем iPad 2, проигрывателю просто не удается загрузить «файл», хотя это отлично работает в Chrome в Windows. Возможно ограничение размера для Base64-URI в Safari / iOS?
И еще раз: даже если это работало в iOS / Safari, я не знаю способа определить реальный прогресс с помощью AJAX-запроса ...
Последнее, о чем я думал, это не заменять теги audio или source при загрузке песни, а оставлять их в структуре DOM, проверять, есть ли они там при загрузке песни, и просто добавлять новый тег audio. если песня еще не загружена. Не работает ... Если вы добавляете несколько экземпляров проигрывателя динамически (опять же, независимо от того, HTML 5-теги или QuickTime-объекты) вместо их «перезаписи», Safari забывает о загрузке первого MP3, как только вы даже вставляете новый аудио- или QuickTime. -Элемент в дереве DOM - вам даже не нужно что-то загружать / воспроизводить в новом экземпляре! Повторное воспроизведение без полной перезагрузки файла работает до тех пор, пока вы не воспроизводите и не вставляете что-либо еще, связанное с аудио / мультимедиа. Кстати: простое использование аудио-объектов в JavaScript и их «сохранение» в массиве тоже не работает / ничего не кеширует Safari.
Это создает много ненужного трафика и занимает ненужное много времени, если вы находитесь в сотовая сеть с низкой пропускной способностью!
Я работаю над этой проблемой уже три дня, даже не приблизившись к решению ...
Есть идеи?