您可以使用清单或Web存储在iOS Web应用程序中缓存声音文件吗?
将我的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'>
使得音频停止工作,当哔 - 23.mp3被列出...
更新:可以使用Web存储而不是缓存清单来存储音频?
更新iOS 6:
这在iOS 6中都是固定的。您可以缓存音频文件并通过javascript播放,无需用户输入。
shaun5 11年7月7日0:58
尽管它应该可以工作,并且没有说明它不应该的规范(W3C,Apple),但我测试了一些场景,似乎iOS上的Safari只是拒绝缓存声音文件。
每次我重新加载页面时,Safari都会加载音频文件(但不包括index.html),因此无论文件大小如何,缓存显然都无法正常工作。
经过一番研究:看起来不可能缓存音频文件。 所以你可以在Apples bugtracker上提交一个bug 。
这是我的代码来证明我的结果:
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>
如果您还没有确定URL路径是绝对的还是相对于.manifest而不是实际的网页。
您试图以4MB缓存的实际组件的大小也有限制。
总缓存限制为5MB。
我也很确定你无法缓存音频和视频文件。
Apple不支持通过Safari浏览器播放音频,这是为了防止用户使用在线域名存储音乐,而无需为此付费,并使用iPod / iPhone播放音乐。 这是试图让你为音乐付费的苹果方式。 对不起大家。
链接地址: http://www.djcxy.com/p/57553.html上一篇: Can you cache sound files in an iOS web app using a manifest or Web Storage?