jquery multiply audio button stop siblings playing

Question

У меня есть 4 аудио кнопки. Я бы хотел остановить остальных 3, когда я нажимаю на один из них. Я пробовал с функцией братьев и сестер, но я думаю, что он не может найти другой звук. Как остановить воспроизведение другого звука?

$(document).ready(function() { 
    var playing = false; 

    $('.audio-button').click(function() { 
     var audio = $(this).find('audio')[0]; 

     if (playing !== true) { 
      audio.play(); 
     } else { 
      audio.pause(); 
     } 

     $(this).toggleClass('playing'); 
     playing = !playing; 
     $(this).siblings().find('audio').stop(); 

    }); 
}); 

Answer 1

Проблема заключалась в том, что вы вызывали функцию «stop()» на элементы jquery. Я просто повторил аудио элементы, чтобы остановить их. Для имитации остановки, вам нужно вызвать метод паузы и установите CURRENTTIME на 0. Кстати, остальная часть вашего JS скрипт выглядит просто отлично =)

Пожалуйста, проверьте этот код ниже:

var playing = false; 
 

 
$('.audio-button').click(function() { 
 
    var audio = $(this).find('audio')[0]; 
 

 
    if (playing !== true) { 
 
    audio.play(); 
 
    } else { 
 
    audio.pause(); 
 
    } 
 

 
    $(this).toggleClass('playing'); 
 
    playing = !playing; 
 
    $(this).siblings().find('audio').each(function(index, elem){ 
 

 
    elem.pause(); 
 
    elem.currentTime = 0; 
 

 
    }); 
 

 
});

.audio-button{ 
 
    width: 150px; 
 
    height: 150px; 
 
    background: orange; 
 
    text-align: center; 
 
    margin: 10px; 
 
}

<div class="audio-button"> 
 
    Click here 
 
    <audio src="http://www.nasa.gov/mp3/741263main_Bob.mp3"> 
 
    </audio> 
 
</div> 
 
<div class="audio-button"> 
 
    Click here 
 
    <audio src="http://www.nasa.gov/mp3/741261main_Charlie.mp3"> 
 
    </audio> 
 
</div> 
 
<div class="audio-button"> 
 
    Click here 
 
    <audio src="http://www.nasa.gov/mp3/741262main_Lori.mp3"> 
 
    </audio> 
 
</div> 
 
    <div class="audio-button"> 
 
    Click here 
 
\t <audio src="http://www.nasa.gov/mp3/739272main_Cut%201.mp3"> 
 
\t </audio> 
 
</div> 
 

 

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