Javascript 在悬停状态下播放声音

我正在尝试创建一个横幅，它看起来像一个声波，但却像一个钢琴键盘。我希望此键盘的每个键在悬停状态下播放一个简短的独特的声音（.ogg或.mp3示例）

我知道如何使用Flash实现这一点，但我想在这个项目中坚持使用HTML/JS，实际上我在完成这一点上遇到了困难

“键盘”如下所示（SVG）：

你能给我一些关于如何实现这一点的提示吗

我想，

，

，或者图像地图都是不错的选择。

---

非常感谢您的帮助。

编辑：您可以尝试以下内容：

演示：

jQuery：

$("#layer1 rect").each(function(i) {
    $("#playme").clone().attr({
        "id": "playme-" + i,
        "src": B64Notes[i]
    }).appendTo($("#playme").parent());
    $(this).data("audio", i);
});
$("#layer1 rect").hover(function() {
    var playmeNum = $("#playme-" + $(this).data("audio"));
    playmeNum.attr("src", playmeNum[0].src)[0].play();
    // Reset the src to stop and restart so you can mouseover multiple times before the audio is finished
    $(this).css("fill", "red");
}, function() {
    $(this).css("fill", "#d91e63");
});​

我知道你想避免重复，但没有办法让多个音符同时播放，否则

---

svg直接位于页面中，使代码更简单，因为它将从另一个域加载，从而阻止jQuery访问和修改它。要在从外部源嵌入svg文档时访问它，请参见：

如何为每个键分配一个id并使用html5

类似-？？？类似的内容，是的。除非我想实现更简单的功能，否则我不需要sequencer或chord系统。我会利用SVG图像并设置JavaScript处理程序，播放声音（记住预加载声音文件）。您现在有什么演示吗？还有，你能使用jQuery吗？不太能。简而言之，想象一下将鼠标悬停在每个粉红色矩形上，我想为每个矩形播放不同的声音样本（基本上是音符）。该项目依赖于jQuery用于其他目的，因此它肯定是一个选项。我想到了类似的东西，但我需要为每个键播放不同的声音。不过，您的脚本很有趣，您认为它可以应用于基于SVG的系统吗？真正的诀窍是为每个键分配一个唯一的声音样本，而不复制
对象。如果你应用一个形状，然后得到与之匹配的音频文件，它就可以工作了。您有svg示例文件吗？有，给您：。谢谢你的帮助。@morgi完成了，花了很长时间，但很有趣：Dropbox文件又被弄乱了，我修复了它。我希望避免重复和基于
的解决方案（特别是因为我已经准备好实现SVG形状）。你可以用更少的代码来完成这项工作，也许有人可以帮助你，但这是我能做的最好的了。图像映射？
$('#a').hover(function(){
    $('#oggfile').attr("src","a.ogg");
    $('#mpegfile').attr("src","a.mp3");
});

$('#c').hover(function(){
    $('#oggfile').attr("src","a.ogg");
    $('#mpegfile').attr("src","a.mp3");
});

$('#c').hover(function(){
    $('#oggfile').attr("src","c.ogg");
    $('#mpegfile').attr("src","c.mp3");
});
​