0

I have an idea ti make little piano and want to realize it. I make piano keys (with Html and css) and make samples for them (mp3 format). At all I have 20 notes and 20 samples.

  <div class="wrapper">
    <a href="../samples/sample_1.mp3" class="white-note"></a>
    <a href="../samples/sample_2.mp3" class="black-note"></a>
    ...

Css

.white-note{
   display:inline-block;
   width:20px;
   height:100px;
   background:#fff;
   border: 1px solid #000;
}
.black-note{
   vertical-align:top;
   display:inline-block;
   width:20px;
   height:90px;
   background:#000;
   border: 1px solid #000;
}

I need to make js file. When I push (mouseDown key) my mp3 (example: href="../samples/sample_1.mp3") should sounds and when I MouseUp, that should stop sound. Meanwhile link can be pushed by key on the keyboard (white-button:first-child can be pushed by key "Z"). Any idea. Thanks for reading that

stress_tn
  • 174
  • 3
  • 12

1 Answers1

0

Checkout this:

http://buzz.jaysalvat.com/

For questions about the lib check their documentation. Not every browser supports html5 audio!

Cheers

pixx
  • 87
  • 1
  • 10
  • thanks but it's not what I want!I find http://www.html5piano.ilinov.eu/full/ good esample – stress_tn Nov 21 '13 at 08:49
  • This is exactly what you want, you can attach a mousedown handler to every div and start playing the sound and attach on the same div a mouseup event handler wich stops the sound, check: http://buzz.jaysalvat.com/documentation/sound/ Note: you cannot play mp3-files directly inside Firefox, but need every file converted into the ogg format. – pixx Nov 21 '13 at 09:35