音频元素源的 HTML5 本地存储 - 可能吗？答案

【问题标题】：HTML5 Local Storage of audio element source - is it possible?音频元素源的 HTML5 本地存储 - 可能吗？
【发布时间】：2010-12-09 09:16:39
【问题描述】：

我最近一直在试验 html5 的音频和本地存储功能，但遇到了让我难过的事情。

我希望能够在本地缓存或存储音频元素的来源，以实现更快的离线播放。问题是我看不出当前的实现是如何实现的。

我使用 WebKit 尝试了以下操作：

创建清单文件以设置本地缓存，但音频文件似乎不是可缓存项目，这可能是由于它是流媒体或其他方式
我还尝试使用 javascript 将音频对象放入本地存储，但由于内存问题，mp3 的大小使得这不可能（我认为）。
我曾尝试使用数据 uri 和 base64 来将 html 用作可以缓存的音频传输，但文件大小再次使这令人望而却步。此外，WebKit 中的音频元素似乎也不像这样（在 mozilla 中运行良好）
我尝试了几种将数据放入本地数据库存储的方法。再次遭受与其他案例相同的问题。

我很想听听任何人关于如何使用 WebKit 中的缓存/本地存储实现离线播放目标的任何其他想法。

【问题讨论】：

我一直想知道这是否也可能，并想出了许多相同的方法。
你有一些迄今为止你尝试过的例子吗？
这有什么好运气吗？我正在尝试使用无法通过清单缓存的音频，因为它是在服务器上动态生成的（但不是流式传输的）。

标签： javascript caching html audio webkit

【解决方案1】：

我自己一直在尝试在 iOS 上（适用于 iPhone / iPad）上执行此操作，但它拒绝离线缓存音频文件，即使在缓存清单中也是如此。

它不会出错，如果通过 JavaScript 调用而没有控件，它只是假装播放了音频元素。如果它嵌入了一个控件，它会显示一个替代控件，上面写着“无法播放音频文件。”。如果应用能够上线就可以了。

似乎没有缓存音频，播放另一个声音资源似乎会导致它从内存中清除以前的资源 - 即使在线，这也是非常没有价值的功能。

我已尝试将音频 base64 编码为数据 URI。这在桌面上的 Safari 中有效（至少对于我一直在使用的大约 20-30k 的相当短的样本），但在 iOS 上似乎根本不受支持 - 它默默地什么都不做，这非常烦人。

我不知道其他供应商 - Google Chrome 过去不支持音频的数据 URI，但也许他们已修复它...... - 不过现在似乎不可能。

更新：与 iPhone OS 3.x 的细微差异（用 3.1.2 测试）：如果在离线网络应用程序中指定了音频元素但它没有控件，它会显示一个非交互式控件，并带有上面的非动画微调器（它绝对不应该这样做）。我认为这在 iOS 4.x 中已修复（下周应该会发布）。

【讨论】：

是的，我测试了一个范围包括非常小的声音文件“以防万一”有一个特殊规则。我缓存的最大文件是 180 KB，另一个是 135 KB，还有一些是 25-35 KB，这些都是我的缓存清单中指定的所有图像，并且都可以在我的 iPad 和iPhone（3GS 运行 3.1.2）所以我不确定 15 KB 的限制来自哪里。
快速阅读了 15 KB 限制 - 似乎它指的是浏览器在正常浏览期间缓存的内容，而不是具有缓存清单的离线 Web 应用程序，至少据我所知.

【解决方案2】：

所以我问这个问题已经有一段时间了，我想我会提供一些关于我们如何解决它的信息。基本上，我们使用与此类似的技术将数据编码为 PNG：

~~http://audioscene.org/scene-files/yury/pngencoding/sample.html~~

然后使用 html5 本地存储将图像缓存在移动设备上，并根据需要进行访问。 PNG 非常大，但这对我们有用。

【讨论】：

该死！我真的需要一个类似的解决方案，但是这个网站已经关闭了。
我真的很想知道更多关于这个技巧的信息。网站仍然关闭.. 有人有此信息的其他来源吗？啊！我的好奇心快要死了！
执行摘要：使用 PNG 中的 R、G、B 字节来存储您要传输的任何数据的字节，然后在客户端将其加载到 img 标签中，将其绘制到一个 2d
web.archive.org/web/20101213163349/http://audioscene.org/…

【解决方案3】：

我花了一段时间尝试为我正在制作的游戏执行此操作，因为据我所知浏览器（Firefox 和 Chrome）仍然不支持缓存音频元素，我想我会发布解决方案我找到了。

这里描述了一种解决方法：http://dougx.net/plunder/index.php#code

我可以确认它运行良好，但可能更适合较小的文件。正如他在此处所描述的 (http://dougx.net/plunder/GameSounds.txt)，您将音频编码为 base64 字符串，并给它们一个 data:audio/ogg;base64（或任何兼容的音频格式）标头，然后 HTML5 音频可以读入。因为这只是一个字符串，浏览器会缓存它。

【讨论】：

【解决方案4】：

我想最好让清单方法工作，因为这感觉像是本地缓存文件的最相关机制。

如果您更改音频文件的 HTTP 标头会发生什么情况，例如Content-Type 和 Expires?如果更改文件扩展名，浏览器会做一些不同的事情吗？

【讨论】：

Premasagar，感谢您的回答，但不幸的是，这些方法似乎都没有任何效果:(
嗯。似乎必须有一种方法可以做到这一点。请务必发布您找到的任何解决方案，因为这将很有用。

【解决方案5】：

我看你到目前为止运气不佳。

您可能想看看JAI (JavaScript Audio Interface)（“世界上第一个用于Web 的JavaScript 界面<audio>”）。或联系作者Alastair MacDonald。

如果做不到这一点，HTML5 Doctor 或许可以提供帮助。

【讨论】：

感谢您的提示 - 我会去 HTML5 Doctor 看看他们有什么。

【解决方案6】：

将视频和音频文件添加到本地存储适用于 iOS 4.3。

我刚刚将一个视频和一个音频文件添加到清单中，它们都已下载到 iPad 上的离线存储中。

【讨论】：

你能详细说明你做了什么吗？我已将 .mp3 文件添加到清单中，但它们不会每次都被缓存和下载。
我已经有一段时间没有做这个了。我将文件添加到清单并在 Apache 配置文件中设置 Expires 标志。我不确定后者是否成功了。