jQuery：如何预加载音频？

Question

我有一个网站，当用户点击按钮时会播放声音。

这是我实现它的方式：

function PlaySound(soundfile) {
    $('#soundContainer').html("<embed src='/uploads/sounds/" + soundfile + "' hidden=true autostart=true loop=false>");
}

如何预先加载声音文件?

谢谢。

- Aximili

Answer 1

就是我脑海中的想法，你能否发起一个 AJAX 请求来获取音频文件，但在文件加载完毕前不要显示按钮。

$(document).ready(function() {
    $.ajax({
        url: "soundfile.mp3",
        success: function() {
            $("#play_button").show();
        }
    });
});

- Germán Rodríguez

---

这是一个不错的解决方案，但至少在IE浏览器中不能正常工作，尤其是对于声音文件而言。因为IE无法正确处理二进制文件，也不会触发成功函数。关于此问题，请参阅以下链接：http://bugs.jquery.com/ticket/11426 - 我刚刚发现这个问题。 - SamiSalami

Answer 2

在HTML5中可以这样做：

my_sound = $("<audio>", {src:"filename.mp3",preload:"auto"}).appendTo("body");

然后进行播放：

my_sound[0].play();

- Justin Levene

Answer 3

有很多更好的方法可以使用JavaScript播放声音。对于我最喜欢的方法，请查看SoundManager。使用它，您可以简单地调用soundManager.load来预加载声音文件。

- Sasha Chedygov

Answer 4

1. 向服务器发起 AJAX 请求。如果您的服务器发出适当的缓存头（如 Expires），它将被存储在浏览器缓存中。

2. 丑陋的方法：

soundfile = new Image(); 
soundfile.src = /uploads/sounds/" + soundfile;

- sanmai

---

谢谢Sanmai，但我认为这段代码不起作用...当页面加载时，它似乎下载了文件，但在我点击按钮后又重新下载了它。 - Aximili

你有检查缓存头吗？如果没有，客户端肯定会重新下载文件。如果你正在使用Apache，请花些时间阅读关于mod_expires的内容。如果不是，请使用谷歌搜索。 - sanmai

Answer 5

没有<embed>这样的东西。

你可以使用一个没有autoplay的HTML5 <audio>元素，然后用它的play()方法让它开始播放。

- Nicolás

---

同时牺牲IE的支持。 - Sasha Chedygov

您可以使用<bgsound src="yourmusicfile.mid">来添加IE兼容性。我会提供一些示例链接，但GeoCities已关闭。 - cbednarski