在Javascript中预加载音频时出现问题

我正在尝试为我正在开发的GameAPI制作一个跨设备/浏览器的图像和音频预加载方案。音频文件将预加载，并在完成后发出回调

问题是，音频不会在页面加载缓慢时开始加载，但通常会在第二次尝试时工作，这可能是因为它缓存了音频并知道它存在

我已经把它缩小到audio.load（）函数。摆脱它解决了这个问题，但有趣的是，我的摩托罗拉机器人需要这个功能

您在HTML5音频预加载方面有哪些经验

这是我的密码。是的，我知道在单独的函数中加载图像可能会导致竞争条件：）

---

很难诊断该问题，因为它没有显示错误，只是偶尔出现故障。

当缓冲了足够的数据时，会触发canplaythrough

，如果您开始播放该事件，它可能会一直播放到最后。HTML音频元素是为流媒体而设计的，因此在触发此事件时，文件可能尚未完全完成下载

这与只有在完全下载后才会触发事件的图像形成对比

如果您离开页面，而音频尚未完全下载完毕，浏览器可能根本不会缓存音频。但是，如果它完成了完全下载，它可能会被缓存，这就解释了您所看到的行为

---

我建议确保图像和音频确实被缓存。

如上所述，AppCache可能是将音频从一个浏览器会话缓存到另一个浏览器会话的唯一解决方案（这不是您要求的，对吧？）。但请记住，一些浏览器提供的空间有限。例如，Safari允许用户在设置中更改此值，但默认值为5MB——几乎不足以保存一堆歌曲，尤其是如果用户经常访问的其他网站也使用AppCache的话。也就是说，我让它工作了。解决方案其实相当简单：

基本上，它是这样工作的：

channel.load();
channel.volume = 0.00000001;
channel.play();

如果不明显，则

加载

功能会告诉支持它的浏览器和设备开始加载，然后声音立即尝试

播放

，而

音量几乎为零。因此，如果
load
功能不够，那么需要播放的声音就足以触发我测试的所有设备上的负载

load
功能现在实际上可能是多余的，但基于音频实现的不一致性，拥有它可能没有什么坏处

编辑：在Opera、Safari、Firefox和Chrome上测试后，看起来将
卷设置为0仍然会预加载资源。
好吧，所以我最近遇到了同样的问题，我的技巧是使用一个简单的ajax请求将文件完全加载一次（最终加载到缓存中），然后直接从缓存中再次加载声音，并使用事件绑定
canplaythrough

作为我的HTML5音频库，我的代码基本上是这样的：

var self = this;
$.get(this.file_name+".mp3", function(data) {
    self.sound = new buzz.sound(self.file_name, {formats: [ "mp3" ], preload: true});
    self.sound.bind("error", function(e) {
        console.log("Music Error: " + this.getErrorMessage());
    });
    self.sound.decreaseVolume(20);
    self.sound.bind("canplaythrough",function(){ self.onSoundLoaded(self); }); 
});

这是一个婊子，但我已经设法通过加载音频作为标准AJAX文本请求来伪装它。我知道这听起来很愚蠢，但一旦数据被缓存，它就会被缓存并发出隆隆声：预加载音频。有些问题是浏览器不能加载多个媒体流，我在视频方面也遇到了同样的问题，我只是加载了缩略图并动态创建了HTML5播放器。我发现把它伪装成AJAX欺骗了浏览器，使其认为它不是媒体。有趣的是，我必须尝试一下。谢谢AshleysBrian。在做了一些研究之后，建议我使用CANPPLION，而不是LoADDDATA，但是我会考虑你的第二个意见。然而，缓存不是主要问题；加载的回调不是每隔一段时间调用一次。很高兴知道，谢谢。当然IE不支持：）至少在视频元素上，你可以用
videoElem.mute=true
将它们静音。。。可能同样的属性也存在于音频元素中，我发现这是可行的，在我的例子中，我在两个播放器之间淡入淡出，使之成为无缝播放器。我必须让第二首曲目保持静音，然后当我切换到第二首曲目时，它被加载并立即播放。
var self = this;
$.get(this.file_name+".mp3", function(data) {
    self.sound = new buzz.sound(self.file_name, {formats: [ "mp3" ], preload: true});
    self.sound.bind("error", function(e) {
        console.log("Music Error: " + this.getErrorMessage());
    });
    self.sound.decreaseVolume(20);
    self.sound.bind("canplaythrough",function(){ self.onSoundLoaded(self); }); 
});