Creating a Piano

Community Off Topic
1

I am quite new at coding and I am having trouble with this pice: I want to make a piano that, when you click on the notes, it plays the corresponding audio clip. The problem is that I can only get it to work with the <input type= "button"> but I would like to apply it to the image map I have created. Any suggestions? Thanks!

 <input type="button" value="Do"  onclick="play()">
  <audio id="Do" src="../Piano/AudioClips/do.wav">
  <img src="teclas-piano.jpg" usemap="#image-map">
  <map name="image-map">
   <area target="" alt="Do" title="Do" href="" coords="50,610,189,361" shape="rect">
  </map> 
  </audio>


<script>
function play(){
 var audio = document.getElementById("Do");
 audio.play();
 }
</script>
2

Sorry it’s been such a long wait for an answer!
I expect you have already found a solution, but here’s one just in case:
Look into the onclick attribute. This can be applied to your image, allowing you to run a JS function when the image is clicked on.
Here is an example:

<img src="sample.png" onclick="myFunc" />

Hope this helped!

1 Like