HTML5本地存储音频元素源 - 是否可能？

Question

我最近一直在试验html5的音频和本地存储功能，并遇到了令我难过的东西。

我希望能够在本地缓存或存储音频元素的源，以实现更快速和离线播放。问题是我无法看到当前实现的可行性。

我使用WebKit尝试了以下内容：

1. 创建清单文件以设置本地缓存，但音频文件似乎不是可缓存项目，可能是因为它是流式传输的方式

2. 我还尝试使用javascript将音频对象放入本地存储，但由于内存问题（我认为），mp3的大小使其无法实现。

3. 我曾尝试使用数据uri和base64将html用作可以缓存的音频传输，但文件大小再次使这种情况变得令人望而却步。另外音频元素在WebKit中似乎不喜欢这样（在mozilla中工作正常）

4. 我尝试了几种将数据放入本地数据库存储的方法。再次遇到与其他案件相同的问题。

我希望听到任何人可能有的任何其他想法，以便我如何使用WebKit中的缓存/本地存储实现我的离线播放目标。

Answer 1

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

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

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

Answer 2

我一直试图在iOS（iPhone / iPad）上自己这样做，但它拒绝在离线状态下缓存音频文件，即使在Cache Manifest中也是如此。

它没有错误，而是简单地假装在没有控件的情况下通过JavaScript调用时播放了音频元素。如果它嵌入了控件，则会显示另一个控件，显示“无法播放音频文件”。如果应用程序能够联机，它可以正常工作。

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

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

我不了解其他供应商 - 谷歌浏览器曾经不支持音频的数据URI，但也许他们修复了它...... - 现在似乎不可能。但/ / p>

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

Answer 3

我花了一段时间尝试为我正在制作的游戏做这个，并且因为我可以告诉浏览器（Firefox和Chrome）仍然不支持音频元素的缓存我想我会发布解决方案我找到了。

此处介绍了一种解决方法：http://dougx.net/plunder/index.php#code

我可以确认它的效果非常好，但可能更适合较小的文件。正如他在此处所描述的那样（http://dougx.net/plunder/GameSounds.txt），您将音频编码为base64字符串，并为它们提供数据：audio / ogg; base64（或任何兼容的音频格式）标题，然后HTML5音频可以读入。因此只是一个字符串，浏览器将缓存它。

Answer 4

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

如果更改音频文件的HTTP标头会发生什么情况，例如Content-Type和Expires？如果文件扩展名已更改，浏览器会执行不同的操作吗？

Answer 5

到目前为止，我看到你没有运气。

您可能需要查看JAI (JavaScript Audio Interface)（“世界上第一个针对网络<audio>的javascript界面​​”）。或者与编写它的Alastair MacDonald取得联系。

如果失败，HTML5 Doctor可能会有所帮助。

Answer 6

将视频和音频文件添加到本地存储可与iOS 4.3配合使用。

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