html5 audio: Klicken Sie auf Play, klicken Sie erneut, um für mehrere Tracks zu pausieren

Question

Ich habe vier Elemente (in diesem Fall Bilder von Menschen) in einem div, jeder mit ihrer eigenen einzigartigen zugehörigen mp3-Datei. Mein Ziel ist:

Wenn Sie ein Element klicken, es spielt die dazugehörigen mp3

Wenn Sie das gleiche Element erneut auf, es die MP3-Datei

anhalten würde, wenn Sie das gleiche Element erneut auf, es würde fortsetzen, dass mp3 Datei etc etc.

Aber! Wenn Sie auf ein anderes Bild klicken, wird die mit diesem Element verknüpfte MP3-Datei abgespielt.

Wenn Sie dann zum ursprünglichen Element oder zu einem neuen Element zurückkehren, beginnt der Track erneut am Anfang.

Bis jetzt habe ich jeden Klick auf ein Element startet die zugehörige mp3 von Anfang an.

Sie meinen Start hier sehen können, unter dem ersten Absatz: „Warum Wir sind hier ...“

https://erinreiss.github.io/spaceship1/

Aber im Grunde ist meine jQuery die folgenden, wobei jedes Bild eine Klasse hat von headshotsStatusQuo, und jedes Bild und die zugehörigen mp3-Dateien sind gleich benannt. Damit die Variable this.id die richtige MP3-Datei für das angeklickte Bild auswählt.

$(headshotStatusQuo).click(
    function(){ 
     var thisID = ("audio/" + this.id + ".mp3"); 
     console.log(thisID);  
      if (thisID.paused == false) { 
       thisID.pause(); 
       } 
      else { 
       changeTrack(thisID); 
       }  
    } 
); 

function changeTrack(sourceUrl) { 
    var audioDues = $("#player");  
    $("#audioFill").attr("src", sourceUrl); 
    audioDues[0].pause(); 
    audioDues[0].load(); 
    audioDues[0].play(); 
} 

Vielen Dank!

Answer 1

Sie haben thisID als Zeichenfolge? Dann behandeln Sie es, als ob es ein Audioobjekt ist, indem Sie .paused Eigenschaft und .pause() Methode verwenden. Dieses Snippet enthält ein <audio> Element und eine Liste von 3 s. Jedes hat eine id, die einem Dateinamen eines MP3 entspricht. Was auch immer <img> geklickt wird bestimmt, welche eine der drei Aktionen der <audio> wird ausgeführt:

1. Wiedergabe wenn src Streichhölzer path (Linie 6)
2. Pause wenn src Streichhölzer path (Linie 8)
3. Stopp, Ändernsrc, Ladensrc, Spielen wenn src und path nicht übereinstimmen (Linie 10)

SNIPPET

$('#control').on('click', 'img', function(e) { 
 
    var player = document.getElementById('player'); 
 
    var ID = $(this).attr('id'); 
 
    var path = 'http://vocaroo.com/media_command.php?media='; 
 
    var SRC = path + ID + '&command=download_mp3'; 
 
    if (player.paused && (player.src === SRC)) { 
 
    player.play(); 
 
    } else if (!player.paused && (player.src === SRC)) { 
 
    player.pause(); 
 
    } else { 
 
    player.pause(); 
 
    player.currentTime = 0; 
 
    player.src = SRC; 
 
    player.load(); 
 
    player.play(); 
 
    } 
 
});

#control { 
 
    list-style: none; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<audio id='player' src=''></audio> 
 
<ul id='control'> 
 
    <li> 
 
    <img id='s1xI45JbPVzM' src='http://placehold.it/50x50/000/fff?text=10'> 
 
    </li> 
 
    <li> 
 
    <img id='s1czfdPRs0MC' src='http://placehold.it/50x50/00f/eee?text=11'> 
 
    </li> 
 
    <li> 
 
    <img id='s1NWg457fVWy' src='http://placehold.it/50x50/0e0/111?text=12'> 
 
    </li> 
 
</ul>