Function mit mehreren Befehlen in Html

[Wiebki]

Hallo,
ich habe ein Problem und zwar will ich eine Funktion schreiben, die mehrere Anweisungen hält. Wenn man auf ein Bild klickt soll eine Funktion aufgerufen werden, die dann eine bestimmte Audiodatei abspielt. Hier mal der Quelltext:

<img src="kreis.png" alt="Kreis" width="45" height="45" class="drg" />
<img src="dreieck.png" alt="Dreieck" width="45" height="45" class="drg" />
<img src="stern.png" alt="Stern" width="45" height="45" class="drg" />
</div>
</article>


<script>
function play()
{
if (
document.getElementById("musik").play();
if
document.getElementById("musik2").play();
}
</script>


<table>
<tr>
<embed src="Item_01.wav" autostart="false" hidden="TRUE" ErsterSound id="musik">
<a href="#" onClick="play()">
<img src="kreis.png" border="0"></a>
</tr>
<tr>
<embed src="Item_02.wav" autostart="false" hidden="TRUE" ZweiterSound id="musik2">
<a href="#" onClick="play()">
<img src ="dreieck.png" border="0"></a>
</tr>
</table>

Zuerst werden ja die Bilder eingebunden, dann kommt die Funktion...kann man das über if-Anweisungen hinbekommen, dass immer nur eine Audiodatei, nämlich die mit der richtigen id abgespielt wird?
Schreibe ich es ohne if einfach untereinander, spielt er natürlich beide Dateien gleichzeitig ab, egal auf welches Bildchen ich klicke.
Ich muss insgesamt 72 solcher Audiodateien mittels Bildchen abspielen lassen und will nun nich 72 einzelnen Funktionen schreiben.

Vielen Dank für eure Hilfe!

 

[Tronjer]

ungetestet mit jQuery:

$('body').on('click', 'img', function() {
  var id = $(this).attr('id');
  document.getElementByID(id).play();
})

Falls typeof(id) ein Objekt zurückliefert, musst du es vorher zum String casten.