Hinzufügen von Wiedergabetasten für alle Audiotags auf einer Seite

Question

Ich möchte für jede Audiodatei auf einer Seite eine Wiedergabeschaltfläche hinzufügen. Daher habe ich eine Schaltfläche mit einem indizierten Klassennamen unter jedem Audio-Tag hinzugefügt, aber jetzt weiß ich nicht weiter und binde das click-Ereignis an die Schaltflächen. Vielleicht gibt es einen viel eleganter Ansatz im Allgemeinen ...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<audio id="myaudio" src="http://www.soundjay.com//mechanical/gun-cocking-01.mp3"> 
</audio> 

<audio id="myaudio" src="http://www.soundjay.com//mechanical/gun-cocking-02.mp3"> 
</audio> 

$("audio").each(function(index) { 
    $('<button class=audioButton"' + index + '">Play Clip #' + index + '</button>').insertAfter(this); 
}); 

$("button").on("click", playTest); 

Answer 1

ich bemerkt, dass Sie mehrere IDs des gleichen Wertes wurden unter Verwendung von (nie zur Arbeit gehen), so dass ich sie entfernt. Ich habe den vorherigen Poster-Code benutzt, um die Buttons zu erstellen, habe aber ausgearbeitet, um zu zeigen, wie man jedes Audio in der playTest-Funktion aufrufen kann. Hoffe das hilft!

$("audio").each(function(index) { 
 
    $(this).attr('id','myaudio' + index); 
 
    $('<button id="audio' + index + '">Play Clip #' + index + '</button>').insertAfter(this); 
 
}); 
 

 
$("body").on("click", "button", playTest); 
 

 
function playTest() { 
 
    var audid = 'my'+ $(this).attr('id'); 
 
    playAudio(audid); 
 
} 
 

 
function playAudio(str) { 
 
    var currAudio = document.getElementById(str); 
 
    if (currAudio.paused) { 
 
    currAudio.play(); 
 
    } else { 
 
    currAudio.pause(); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<audio src="http://www.soundjay.com//mechanical/gun-cocking-01.mp3"> 
 
</audio> 
 

 
<audio src="http://www.rachelgallen.com/monkey.mp3"> 
 
</audio>

Answer 2

Da die Tasten dynamisch erstellt werden Sie die jede Veranstaltung delegieren, die Sie auf sie ausführen möchten.

Hoffnung wird dieser Ausschnitt nützlich sein

$("audio").each(function(index) { 
    $('<button class="audioButton' + index + '">Play Clip #' + index + '</button>').insertAfter(this); 
}); 

$("body").on("click","button" ,playTest); 
function playTest(){ 
alert($(this).prop('class')) 

} 

JSFIDDLE