Можете ли вы кэшировать звуковые файлы в веб-приложении iOS с помощью манифеста или веб-хранилища? - PullRequest
Новая
       14

Можете ли вы кэшировать звуковые файлы в веб-приложении iOS с помощью манифеста или веб-хранилища?

7 голосов
/ 14 февраля 2012

Когда я добавляю свой файл beep-23.mp3 в манифест кэша, звуковой эффект больше не работает и не работает в автономном режиме. Это ошибка или я что-то не так делаю?

Аудио находится в html-файле как: 

function playBEEP() { if (navigator.platform == "iPad" || navigator.platform == "iPhone" || navigator.platform == "iPod") { Beep.play(); } }
if (navigator.platform == "iPad" || navigator.platform == "iPhone" || navigator.platform == "iPod") {
    var Beep = document.createElement('audio');
    Beep.setAttribute('src', 'beep-23.mp3');
}

Доступ через: 

$("#mybutton,#anotherbutton").each(function() {
    $(this).bind("touchstart",function(e){ 
            playBEEP();
    });
});

<html manifest='index.manifest'> отключает звук при включении beep-23.mp3 ...

ОБНОВЛЕНИЕ: Может ли Веб-хранилище использоваться вместо манифеста кэша для хранения аудио ??

Ответы [ 3 ]

7 голосов
/ 23 февраля 2012

ОБНОВЛЕНИЕ для iOS 6:

Это все исправлено в iOS 6. Вы можете кэшировать аудиофайл и воспроизводить его через JavaScript без ввода данных пользователем.
shaun5 7 ноября 12 в 0: 58

Несмотря на то, что он должен работать, и нет никаких спецификаций (W3C, Apple), которые говорят, что это не должно, я протестировал некоторые сценарии, и кажется, что Safari на iOS просто отказывается кэшировать звуковые файлы.

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

После некоторых исследований: похоже, что невозможно кешировать аудиофайлы. Таким образом, вы можете отправить сообщение об ошибке на Apple bugtracker .

Вот мой код для подтверждения моих результатов:

index.html: 

<!DOCTYPE HTML>
  <html lang="en-US" manifest="audio.appcache">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>Cached audio</title>
  </head>
  <body>
    <h1>Cached audio</h1>
    <audio controls autobuffer>
      <source src="sample.mp3" type="audio/mpeg" />
    </audio>
  </body>
</html>

audio.appcache: 

CACHE MANIFEST
# 2012-02-23:v1

# explicitly cached
CACHE:
index.html
sample.mp3

.htaccess: 

AddType text/cache-manifest .appcache
AddType audio/mpeg .mp3

EDIT

Я также пытался использовать URI данных, но Safari продолжает отказывать в аудиоданных. Поэтому я думаю, что невозможно кешировать аудио ... 

<?php
  function data_uri( $file ) {
    $contents = file_get_contents( $file );
    $base64   = base64_encode( $contents );
    return ( 'data:audio/mpeg;base64,'.$base64 );
  }
?>
...
<audio controls autobuffer>
  <source src="<?php echo data_uri('sample.mp3'); ?>" type="audio/mpeg" />
</audio>
...

РЕДАКТИРОВАТЬ 2

Отличная идея, но похоже, что она не работает ... Safari для OS X -> хорошо; Safari для iOS -> та же проблема, что и раньше. 

<?php
  function base_64_string( $file ) {
    $contents = file_get_contents( $file );
    return base64_encode( $contents );
  }
?>
...
<audio controls autobuffer>
  <source id="sound-src" src="sample.mp3" type="audio/mpeg" />
</audio>
...
<script>
  (function(){
    var sound;
    if ( localStorage.getItem('cachedSound')) {
      sound = localStorage.getItem('cachedSound');
    }
    else {
      sound = "<?php echo base_64_string('sample.mp3'); ?>";
      localStorage.setItem('cachedSound',sound);
    }
    document.getElementById("sound-src").src='data:audio/mpeg;base64,' + sound;
  })();
</script>
0 голосов
/ 30 августа 2012

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

0 голосов
/ 23 февраля 2012

Если вы этого еще не сделали, вы должны убедиться, что URL-пути являются абсолютными или относительными к .manifest, а не к реальной веб-странице.

Существует также ограничение на размер фактического компонента, который вы пытаетесь кэшировать в настоящее время, составляет 4 МБ.

Общий лимит кеша составляет 5 МБ.

Я также уверен, что вы не можете кэшировать аудио и видео файлы.

...