我正在尝试创建一个看起来像声波但表现得像钢琴键盘的横幅。我希望此键盘的每个键在悬停 状态下都能播放一段简短的独特 声音(.ogg 或.mp3 样本)。
我知道如何使用 Flash 实现它,但我想在这个项目中坚持使用 HTML/JS,但我在实际完成它时遇到了麻烦。
“键盘”看起来像这样 (SVG):
你能给我一些关于如何实现它的提示吗?
我在想<svg>
, <canvas>
, 或图像 map 可能是不错的选择。
非常感谢您的帮助。
最佳答案
编辑:您可以尝试这样的事情:
演示: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
关于javascript - 在悬停状态播放声音,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12892808/