Play sound when freezing

Question

I'm trying to create a banner that somehow looks like a sound wave, but behaves like a piano keyboard. I would like each key of this keyboard to produce a short unique sound (samples .ogg or .mp3) in hover state.

I know how to implement this with Flash, but I would like to stick with HTML / JS for this project, and I am having trouble running it.

The "keyboard" will look like this ( SVG ):

Could you give me some tips on how to implement this?

I think <svg> , <canvas> , or image cards may be good options. Thank you so much for your help.

Answer 1

EDIT: Instead, you can try something like this:

Demo: 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"); });​ 

I understand that you want to avoid duplication, but in any case there is no way to play multiple notes at the same time.

svg is located directly on the page to make the code simpler and because it will be loaded from another domain, preventing jQuery from accessing and changing it. To access the svg document when pasting it from an external source, see the Section http://xn--dahlstrm-t4a.net/svg/html/get-embedded-svg-document-script.html

Answer 2

How to assign an identifier to each key and use html5 <audio> ? Then using jQuery, change the src attribute of the sound tag?

 $('#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/