Question

当我将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();
    });
});

当列出beep-23.mp3时，

<html manifest='index.manifest'>会使音频停止工作...

UPDATE：可以使用Web Storage代替缓存清单来存储音频吗？

Answer 1

iOS 6更新：

这在iOS 6中已得到修复。您可以缓存音频文件并在没有用户输入的情况下通过javascript播放 shaun5 2012年11月7日0:58

即使它应该有效并且没有规格（W3C，Apple）说不应该，我测试了一些场景，似乎iOS上的Safari只是拒绝缓存声音文件。

每次重新加载页面时，Safari都会加载音频文件（但不是index.html），因此无论文件大小如何，缓存显然都无法正常工作。

经过一番研究：看起来无法缓存音频文件。因此，您可以在Apples 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

修改

我也尝试过使用数据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

好主意，但看起来它不起作用... OS X for OS X - ＆gt;好;适用于iOS的Safari - ＆gt;还是和以前一样的问题。

<?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>

Answer 2

如果您尚未确定URL路径是绝对的还是相对于.manifest而不是实际网页。

您尝试缓存的实际组件的大小也有限制，目前为4MB。

总缓存限制为5MB。

我也很确定你无法缓存音频和视频文件。

Answer 3

Apple不支持通过safari播放音频，这是为了防止使用在线域名的人在不付费的情况下存储音乐并使用iPod / iPhone播放音乐。这是试图让你为音乐付费的方式。对不起伙计们。

您可以使用清单或Web存储在iOS Web应用程序中缓存声音文件吗？

3 个答案: