Javascript HTML5/Jquery-预加载音频的正确方法是什么？

我已经创建了一个在一个页面上有很多元素的游戏， 当触发元素上的鼠标悬停事件时，将播放音频文件

但它的工作,

我的问题是，预加载音频的正确方法是什么？ 因此，我可以确定，只要用户与元素交互，我的音频就会播放

我正在鼠标上方初始化我的音频对象

$('.circle').mouseover(function() {
    // retrieve ref from data- attribute
    var noteIndex = $(this).attr('data-note'); 

    // locate url from the array notes using noteIndex ref
    var snd = new Audio(notes[noteIndex]); 
    snd.play();
}

我知道音频标签，但我不确定这与我上面的技术有什么不同

编辑：我当前加载音频的示例（注意，键不会立即播放，这是因为我使用的示例音频文件在开始时有1/2秒左右的间隔）

提前感谢,，

---

Cam

那么$（document）.ready（function（）{}）；，它将在加载页面内容之前，在加载DOM时初始化音频对象。

文档就绪功能在DOM就绪后启动，因此不会在加载内容之前启动。但在该函数中预加载音频可能是合适的。mouseover事件正在$（document）.ready上添加，但这是否意味着当mouseover事件添加到元素或在mouseover上触发元素事件时加载音频文件。我猜后者会导致较慢连接的延迟。当在具有circle类的元素上触发鼠标悬停事件时，它当前正在加载。如果您删除它并将音频设置放在document.ready（）中，它将在加载dom时加载OK，对不起，我不确定如何实现它，我已经用JSFIDLE更新了这个问题，以便更好地演示如何使用唯一标识符引用注释。