Goedenmorgen!

Ik ben voor een school project bezig met het maken van een web-versie van een drumstel.
Het is niet te moeilijk, gewoon een afbeelding van een drumstel waarbij ik elk gedeelte van het drumstel een ID heb gegeven en deze een eventlistener mee probeer te geven.

Wanneer ik het geluid aanroep via de console.log werkt hij maar wanneer ik op de desbetreffende afbeelding klik gebeurt er niets.

JV:

Code:

var Audio;
var hihat1 = document.getElementById("hihat1");
var hihat11 = document.getElementById("hihat11");


function hihatplay() {
    hihat1.play();
}






hihat11.addEventListener('click', hihatplay);

Html gedeeltes die er toe doen

Code:

<audio id="hihat1" src="sounds/hihat1.mp3"></audio>

Code:

<img src="afbeeldingen/index_02.gif" id="hihat11" width="330" height="315" alt=""></td>

Ik heb al van alles geprobeerd maar het wil niet lukken, iemand een idee?

Vriendelijke groeten,

Misschien heeft u hier iets aan:

https://jsfiddle.net/zvp382d8/