在悬停状态下播放声音答案

【问题标题】：Play a sound on hover state在悬停状态下播放声音
【发布时间】：2012-10-15 09:30:57
【问题描述】：

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

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

“键盘”看起来像这样（SVG）：

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

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

【问题讨论】：

类似 - html5piano.com???
类似的，是的。除了我想实现更简单的东西，我不需要音序器或和弦系统。
我会使用 SVG 图像并设置 JavaScript 处理程序，它会播放声音（记得预加载声音文件）。
你有你现在拥有的东西的演示吗？还有，你能用 jQuery 吗？
并非如此。简而言之，想象一下将鼠标悬停在每个粉红色矩形上，我想为每个矩形播放不同的声音样本（基本上是一个音符）。该项目依赖 jQuery 用于其他目的，因此它绝对是一种选择。

标签： javascript html audio hover

【解决方案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

【讨论】：

我想过这样的事情，但我需要为每个键播放不同的声音。不过，您的脚本很有趣，您认为它可以应用于基于 SVG 的系统吗？真正的诀窍是为每个键分配一个独特的声音样本，而不复制 <audio> 对象。
如果您应用data attribute to each svg 形状然后获取与之匹配的音频文件，它可以工作。您有示例 svg 文件吗？
是的，给你：docs.google.com/file/d/0BxZ05BW0EtgHOG5hRGNrSjFvRWM/edit。感谢您的帮助。
@morgi 完成，花了很长时间，但很有趣：D
Dropbox 文件又乱了，我修好了。

【解决方案2】：

如何为每个键分配一个 id 并使用 html5 <audio>？然后用jQuery改变audio标签的src属性？

$('#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");
});

http://jsfiddle.net/wPGSv/

【讨论】：

我想避免重复和基于<div> 的解决方案（特别是因为我已经准备好实现 SVG 形状）。
您绝对可以用更少的代码做到这一点，也许有人可以帮助您，但这是我能做的最好的。图像映射？