您可以使用清单或Web存储在iOS Web应用程序中缓存声音文件吗？ [英] Can you cache sound files in an iOS web app using a manifest or Web Storage?
问题描述
当我将beep-23.mp3文件添加到缓存清单时，声音效果不再起作用或脱机。这是一个错误，还是我做错了什么？
When I add my beep-23.mp3 file to the cache manifest, the sound effect no longer works on or offline. Is this a bug, or am I doing something wrong?
音频在html文件中：
The audio is within an html file as:
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被列出时，音频停止工作...
<html manifest='index.manifest'> makes the audio stop working when beep-23.mp3 is listed...
更新：可以Web存储代替缓存清单来存储音频??
UPDATE: Could Web Storage be used instead of the cache manifest to store the audio??
推荐答案
iOS 6更新：
这在iOS中已得到修复6.您可以缓存音频文件并通过javascript播放而无需用户输入。
shaun5 2012年11月7日0:58
This is all fixed in iOS 6. You can cache an audio file and play it via javascript without user input.
shaun5 Nov 7 '12 at 0:58
即使它应该有效且没有规格（W3C，Apple）说它不应该我测试了一些场景，似乎iOS上的Safari只是拒绝缓存声音文件。
Even though it should work and there are no specifications (W3C, Apple) which say it shouldn't, I tested some scenarios and it seems like Safari on iOS is just refusing to cache the sound files.
Safari正在加载音频文件（但不是索引。 html）每次我重新加载页面，所以缓存显然不起作用无论文件大小如何都是正确的。
Safari is loading the audio file (but not the index.html) every time I reload the page, so caching is apparently not working correct regardlessly of file size.
经过一番研究：看起来无法缓存音频文件。因此，您可以在Apples bugtracker 中提交错误。
After some research: It looks like it's not possible to cache audio files. So you may file a bug at Apples bugtracker.
这是我的代码来证明我的结果：
Here's my code to prove my results:
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不断拒绝音频数据。所以我认为不可能缓存音频......
I also tried using data URIs but, that Safari keeps refusing the audio data. So I think it's not possible to cache audio …
<?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 - > ok; Safari for iOS - >仍然和以前一样。
Great idea, but it looks like it's not working … Safari for OS X -> ok; Safari for iOS -> still the same problem as we had before.
<?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>
这篇关于您可以使用清单或Web存储在iOS Web应用程序中缓存声音文件吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
