Stoppen Sie alle Audio, aber die ausgewählte (dynamisch erstellte Audio-Elemente)

Question

Ich habe in diesem Forum ein paar Tage gesucht, aber kann nichts finden, das für meine genaue Situation funktioniert. Ich weiß etwas javascript/jquery, aber ich würde mich nicht gut an dieser Sprache nennen ...

Ich habe eine Liste mit mp3-Dateien dynamisch aus einer Datenbank abgerufen, und ich möchte nicht, dass es mehrere zu spielen Lieder zur gleichen Zeit. Das Problem ist, dass ich nicht weiß, wie man den Code für "alle anderen Songs außer dem, der mit diesem Playbutton verbunden ist, wenn er gedrückt wird" stoppt. so frustrierend ..

meine PHP-Datei:

$result = mysqli_query($link, "SELECT * FROM songs"); 

$count = 0; 
while($row = mysqli_fetch_array($result)) { 
    $title = $row['title']; 
    $filename = $row['filename']; 

    echo '<li data-filename="' . $filename . '" class="song"> 
      <button class="play' . $count . '">Play</button> 
      <button class="stop' . $count . '">Stop</button>' 
      . $title . 
     '</li>'; 

    $count++; 
} 

Und hier ist meine js-Datei:

var count = 0; 

$('.song').each(function() { 
    var filename = 'songs/' + $(this).data('filename'); 
    var audioElement = document.createElement('audio'); 

    audioElement.setAttribute('src', filename); 

    $('.play' + count).click(function(){ 
    audioElement.play(); 
    // I need to put something here to make all the other songs pause/reset // 
    }); 

    $('.stop' + count).click(function(){ 
    audioElement.pause(); 
    audioElement.currentTime = 0; 
    }); 

    count++; 
}); 

Da ich weiß wirklich nicht, was ich zu tun habe versucht, nur ein paar Dinge wie:

$(this).siblings().audioElement.pause(); 

audioElement.siblings().pause(); 

Dann las ich etwas über alle Audio zu stoppen, bevor es die eine, die Play-b verbunden spielt utton. Aber ich weiß nicht, wie ich sie alle "sammeln" soll, damit ich auf einmal stoppen (pausieren und zurücksetzen) kann.

Ich habe dieses versucht, aber das ruft das HTML5-Tag, so dass es nicht funktioniert.

function stopAll() { 
    var xGroup = document.querySelectorAll('audio'); 

    for (var i = 0; i < xGroup.length; i++) { 
    xGroup[i].pause(); 
    xGroup[i].currentTime = 0; 
    } 
} 

Answer 1

Vielleicht ein bisschen spät, aber besser spät als nie.

Um den Rest der Audioelemente zu stoppen, müssen Sie einen Verweis auf sie in einem Array behalten.

Auf diese Weise können Sie alle stoppen, wenn der Benutzer auf ein anderes Audio-Tag "Wiedergabe" klickt.

Was ich tun würde:

1. Iterate über die ".song" Elemente, eine Audio-Marke für jeden sie zu schaffen.

2. hinzufügen Zuhörer auf die Tasten, die in ihnen (keine Notwendigkeit für Indizes enthalten sind, können Sie das „.song“ Element als Parameter an zeigen passieren, dass die Suche der Elemente innerhalb der „.song“ ist Element).

3. Speichern Sie die Referenz des erstellten Audioelements.

4. Wenn der Benutzer das Wiedergabeelement drückt, stoppen Sie den Rest der Songs über das Array der Audios Referenzen Iterieren.

Ich hoffe, es hilft.

$(function() { 
 
    var folder = "http://www.mashuptown.com/files/", 
 
    audioTags = []; 
 

 
    function stop(audioTag) { 
 
    audioTag.pause(); 
 
    audioTag.currentTime = 0; 
 
    } 
 

 
    function stopAll() { 
 
    audioTags.forEach(function(audioTag) { 
 
     stop(audioTag); 
 
    }); 
 
    } 
 

 
    function addListeners(audioTag, $song) { 
 
    $('.play', $song).click(function() { 
 
     stopAll(); 
 
     audioTag.play(); 
 
    }); 
 

 
    $('.stop', $song).click(function() { 
 
     stop(audioTag); 
 
    }); 
 
    } 
 

 
    function getAudioTag(src) { 
 
    var audioTag = document.createElement('audio'); 
 
    audioTag.setAttribute('src', src); 
 
    return audioTag; 
 
    } 
 

 
    $(".song").each(function() { 
 
    var audioTag = getAudioTag(folder + $(this).data('filename')), 
 
     $song = $(this); 
 

 
    addListeners(audioTag, $song); 
 
    audioTags.push(audioTag); 
 
    $song.append(audioTag); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <ul> 
 
    <li data-filename="dj_morgoth_never_gonna_give_your_teen_spirit_up.mp3" class="song"> 
 
     <button class="play">Play</button> 
 
     <button class="stop">Stop</button>teen spirit 
 
    </li> 
 
    <li data-filename="dj_morgoth_never_gonna_give_your_teen_spirit_up.mp3" class="song"> 
 
     <button class="play">Play</button> 
 
     <button class="stop">Stop</button>teen spirit 2 
 
    </li> 
 
    </ul> 
 
</div>