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

发布于 2025-01-05 00:18:54 字数 780 浏览 2 评论 0原文

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

更新：可以使用网络存储代替缓存清单来存储音频吗？

原文

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?

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');
}

Accessed via:

$("#mybutton,#anotherbutton").each(function() {
    $(this).bind("touchstart",function(e){ 
            playBEEP();
    });
});

<html manifest='index.manifest'> makes the audio stop working when beep-23.mp3 is listed...

UPDATE: Could Web Storage be used instead of the cache manifest to store the audio??

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

岁月染过的梦 2025-01-12 00:18:54

iOS 6 更新：

这在 iOS 6 中已全部修复。您可以缓存音频文件并通过 javascript 播放它，无需用户输入。
shaun52012 年 11 月 7 日 0:58

尽管它应该可以工作，并且没有规范（W3C、Apple）表明它应该工作' t，我测试了一些场景，iOS 上的 Safari 似乎只是拒绝缓存声音文件。

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

经过一些研究：看起来不可能缓存音频文件。因此，您可以在 Apple 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

好主意，但看起来它不起作用... Safari for OS X ->好的; 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>

UPDATE for iOS 6:

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

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

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

EDIT

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

EDIT 2

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>

回复收藏 0 原文