【问题标题】:Can you cache sound files in an iOS web app using a manifest or Web Storage?您可以使用清单或 Web 存储在 iOS Web 应用程序中缓存声音文件吗?
【发布时间】:2012-03-05 07:08:45
【问题描述】:

当我将 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 列出时停止工作...

更新:可以使用Web Storage 代替缓存清单来存储音频吗??

【问题讨论】:

  • 您是否检查了清单的内容是否已实际下载?也许这只是一个错字...
  • 如果不知道你在做什么,真的很难说它是否是你的代码。

标签: iphone ios ipad web-applications ios5


【解决方案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 的 Safari -> 好的; iOS 版 Safari -> 仍然是我们之前遇到的问题。

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

【讨论】:

  • 您的回答让我想到了一个可能的解决方案,请参阅我更新的问题。
  • 我认为您必须等待用户播放文件,然后 Mobile Safari 才会下载文件,所以我认为您必须等待才能将其保存到本地存储。
  • @shaun5 我使用console.log 进行了调试,数据在页面呈现后立即加载。所以这不是问题……
  • Mobile Safari 能播放音频吗?根据我的经验,一旦音频被列在缓存清单中,它就永远不会在线或离线播放。
  • 这在 iOS 6 中已全部修复。您可以缓存音频文件并通过 javascript 播放它而无需用户输入。
【解决方案2】:

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

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

总缓存限制为 5MB。

我也很确定你不能缓存音频和视频文件。

【讨论】:

  • 所有三个文件(html、mp3、manifest)都在同一个目录中。总文件大小和单个文件大小均在限制范围内。您是否有任何经验或文档来支持您的“非常确定”?
  • @shaun5 我在苹果开发者网站上做了很多阅读,没有什么可以说的。我自己也试过这样做,除了视​​频之外的所有内容都被缓存了。虽然我没有音频文件。通过消除过程,我不得不假设你不能。
【解决方案3】:

Apple 不支持通过 safari 播放音频,这是为了防止人们使用在线域来存储您的音乐而无需付费并使用您的 iPod/iPhone 播放它们。这是苹果试图让你为音乐付费的方式。对不起各位。

【讨论】:

  • 这个答案似乎直接与问题和其他答案相矛盾。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-03-12
  • 2011-10-09
  • 1970-01-01
  • 2017-04-28
  • 2011-08-29
  • 2010-12-02
相关资源
最近更新 更多