在悬停状态下播放声音

Question

我正在尝试创建一个横幅,它看起来像一个声波,但表现得像钢琴键盘.我希望这个键盘的每个键在悬停状态下播放一个短的独特声音(.ogg或.mp3样本).

我知道如何使用Flash实现这一点,但我想坚持使用HTML/JS来完成这个项目,我实际上遇到了麻烦.

"键盘"看起来像这样(SVG):

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

我在想<svg>,<canvas>或者图像地图可能是不错的选择.非常感谢您的帮助.

Answer 1

编辑:您可以尝试这样的事情:

演示:http://jsfiddle.net/SO_AMK/xmXFf/

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文件,请参阅:http://xn--dahlstrm-t4a.net/svg/html/get-embedded-svg-document-script.html