停止所有聲音，但選擇了一個（動態創建的音頻元素）

Question

我一兩天，現在環顧四周，在這個論壇上，但無法找到任何東西，我的準確情況的作品。我知道一些JavaScript/jQuery的，但我不會把自己擅長這種語言...

我有一個的MP3文件，從數據庫中獲取動態列表，我不希望它能夠播放多種歌曲在同一時間。問題是，我不知道如何編寫代碼「停止除按下時連接到此播放按鈕上的所有其他歌曲」的代碼。如此令人沮喪..

我的PHP文件：

$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++; 
} 

這是我的js文件：

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++; 
}); 

因爲我真的不知道該怎麼辦，我只是嘗試了一堆例如：

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

audioElement.siblings().pause(); 

然後，我讀了一些關於在播放連接到播放b之前停止所有音頻的內容utton。但我不知道如何「收集」所有這些，以便我可以一次性停止（暫停和重置）。

我想這一個，但呼籲HTML5標記，以便它不工作。

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

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

Answer 1

也許有點晚，但比從未更好。

爲了停止音頻元素的其餘部分，你必須保持在一個陣列對它們的引用。

這樣的話，你可以當用戶點擊另一個音頻標籤「玩」停止所有的人。

我會怎麼做：

1. 遍歷「宋」的元素，創造了每 它們音頻標籤。

2. 添加監聽器被包含在其中（無索引的需要 的按鈕，你可以通過「宋」元素作爲參數傳遞給 表示搜索元素的距離「宋」 元素）。

3. 存儲創建的音頻元素的參考。

4. 當用戶按下播放元素時，停止迭代遍歷音頻參考數組的其餘歌曲 。

希望它有幫助。

$(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>