Ein Skript für mehrere Tasten

Question

Ich habe einen Resonanzboden, den ich bei der Arbeit verwende, um Kollegen zu nerven. Es hat mehrere Tasten, die einen Ton abspielen oder stoppen. Im Moment hat jede Taste ein eigenes Skript, um den Sound zu spielen. Also ich habe bis zu 47 Sounds auf der Seite und muss dieses Skript für jeden einzelnen schreiben. Ich möchte das aufräumen und habe ein intelligenteres Skript, das für alle funktioniert. meine Tasten wie folgt aussehen:

<button onclick="javascript:toggleSound1();">I don't know what we're yelling about.</button> 

Dann habe ich die Definition des Audio-Element haben:

<audio id="sound1" src="sounds/dontknowwhatwereyellingabout.wav"></audio> 

und das Skript:

<script type="text/javascript"> 
function toggleSound1() { 
    var audioElem = document.getElementById('sound1'); 
    if (audioElem.paused) 
    audioElem.play(); 
    else 
    audioElem.pause(); audioElem.currentTime = 0; 
} 
</script> 

So scheint es mir, dass, wenn ich könnte definiere die 'sound1' auf der Presse in jeder Taste das gleiche Skript sollte für jede Taste funktionieren. so wie ich es jetzt habe, muss ich 'sound1' 'sound2' 'sound3' definieren und so weiter, und einen neuen 'togglesound' auf jeden von ihnen zeigen.

Answer 1

Sie könnten toggleSound1 umschreiben ein Argument zu nehmen:

function toggleSound(num) { 
    var audioElem = document.getElementById('sound' + num); // append the number to "sound" (sound1, sound2, etc.) 
    if (audioElem.paused) { 
    audioElem.play(); 
    } else { 
    audioElem.pause(); 
    } 
    audioElem.currentTime = 0; 
} 

Dann, es zu benutzen, können Sie nur die Nummer an die Funktion übergeben:

<button onclick="javascript:toggleSound(1);">I don't know what we're yelling about.</button> 

Answer 2

Ich bin nicht sicher, wie ich fühle über diese ermutigend, aber ...

<button onclick="toggleSound('sound1');">I don't know what we're yelling about.</button> 
<button onclick="toggleSound('sound2');">Some other sound</button> 

<script type="text/javascript"> 
function toggleSound1(soundId) { 
    var audioElem = document.getElementById(soundId); 
    if (audioElem.paused) 
    audioElem.play(); 
    else 
    audioElem.pause(); audioElem.currentTime = 0; 
} 
</script> 

Answer 3

ein besserer Weg ist Ereignisdelegierung zu verwenden, und setzen Sie den Ereignishandler hig sie bis

<div onclick="handleAudio(e)"> 
    <button data-audio="1">I don't know what we're yelling about.</button> 
    <button data-audio="2">Some other sound</button> 
</div> 

function handleAudio(e) { 
    var audio = document.getElementById('sound' + e.target.dataset.audio); 
    audio.play(); 
}