I'm trying to create a banner that would somehow look like a soundwave but behave like a piano keyboard. I'd like each key of this keyboard to play a short unique sound (.ogg or .mp3 samples) on hover state.

I know how to implement this using Flash but I'd like to stick to HTML/JS for this project and I'm having trouble actually getting it done.

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

Could you give me a few hints on how to implement this?

I'm thinking <svg>, <canvas>, or image maps could be good options. Thank you very much for your help.

I'm trying to create a banner that would somehow look like a soundwave but behave like a piano keyboard. I'd like each key of this keyboard to play a short unique sound (.ogg or .mp3 samples) on hover state.

I know how to implement this using Flash but I'd like to stick to HTML/JS for this project and I'm having trouble actually getting it done.

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

Could you give me a few hints on how to implement this?

I'm thinking <svg>, <canvas>, or image maps could be good options. Thank you very much for your help.

• javascript
• html
• audio
• hover

• Something like - html5piano.??? – some_other_guy Commented Oct 15, 2012 at 11:56
• Something like that, yes. Except I want to achieve something simpler, I don't need the sequencer or the chord system. – morgi Commented Oct 15, 2012 at 11:59
• I would utilize a SVG image and set up JavaScript handlers, which plays the sound (remember to pre-load the sound files). – feeela Commented Oct 15, 2012 at 12:40
• Do you have a demo of what you have right now? And, can you use jQuery? – A.M.K Commented Oct 15, 2012 at 12:41
• Not really. In a nutshell, imagine hovering your mouse over each pink rectangle, I'd like to play a different sound samples (basically, a note) for each rectangle. The project relies on jQuery for other purposes, so it is definitely an option. – morgi Commented Oct 15, 2012 at 12:45

2 Answers 2

EDIT: You can try something like this instead:

Demo: http://jsfiddle/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 realize that you want to avoid duplication but there's no way to have multiple notes playing at the same time otherwise.

The svg is directly in the page to make the code simpler and because it would load from another domain preventing the jQuery from accessing and modifying it. To access the svg document when it's embedded from an external source, please see: http://xn--dahlstrm-t4a/svg/html/get-embedded-svg-document-script.html

How about assigning each key an id and using html5 <audio>? Then using jQuery change the src attribute of audio 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/wPGSv/