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>