Erstellen einer JavaScript-Audiowiedergabeliste mit nur Wiedergabe und Pause

Question

Ich möchte eine Audio-Playlist erstellen, die nur wiedergeben und pausieren kann. Wenn der Benutzer jedoch den gesamten Song abgespielt hat, möchte ich, dass dieser Benutzer den Song erneut abspielen kann.

Momentan wird nur die Javascript-Wiedergabeliste abgespielt und die Musik gestoppt. Meine Pause-Taste funktioniert nicht wirklich wie eine Pause-Taste. Nicht sicher, wo ich falsch gelaufen bin. Und wie genau kann ich den Song automatisch auf den Anfang zurücksetzen, wenn der Benutzer den Song beendet hat? Ich würde die Hilfe sehr schätzen! Ich habe den HTML-Audio-Code bereits geschrieben und das folgende Java-Skript aufgelistet.

<script> // play/pause button 
$(function() { 
    $('#play').click(function(){ 
    $('#pause').attr('src',"media/pause.png"); 
    }); 
}); 

    $(".playBtn").on('click', function() { 
     var target = $(this).attr("target"); 
     $("#audio").attr("src",target); 

     $("#audio").trigger("play"); 
    }); 

    $(".pauseBtn").on('click', function() { 
     $("#audio").trigger("pause"); 
    }); 
    }); 
</script> 

Answer 1

Audiotags haben mehrere Ereignisse, denen Sie Listener hinzufügen können. Hier ist ein Link zu einer Liste von ihnen: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

Das "beendete" Ereignis wird ausgelöst, wenn der Audio-Wiedergabe beendet ist, so könnte es beim Zurücksetzen des Songs an den Anfang helfen, wenn das Audio das Ende erreicht.

$("#audio").on("ended", function() { 
    this.currentTime = 0; 
}); 

Answer 2

können Sie loop Attribut bei <audio> Element verwenden, um einzelne Audioquelle kontinuierlich Schleife. Ersatz-Caching <audio>DOM Element für jQuery-Objekt zu rufen .play(), .pause() bei click Ereignisse.

Javascript

$(function() { 
    var audio = $("#audio")[0]; 

    $(".playBtn").on("click", function() { 
    audio.play() 
    }); 

    $(".pauseBtn").on("click", function() { 
    audio.pause() 
    }); 
}) 

html

<audio id="audio" src="/path/to/audio/source" loop autoplay controls></audio> 
<button class="playBtn">Play</button> 
<button class="pauseBtn">Pause</button> 

jsfiddle https://jsfiddle.net/kkf33dpr/