djamali
@djamali
web developer

Как остановить текущий трек при воспроизведении другого?

Привет. Никак не могу сделать так чтобы при воспроизведении другой песни, текущая ставилась бы на паузу
<table width="100%" border="1">
        <tr>
            <td><div class="play" id="btn1" >play </div></td>
            <td align="left">Sound 1</td>
            <td align="left">клип</td>
            <td align="left">текст</td>
            <td align="left">минусовка</td>
            <td align="left">скачать</td>
        </tr>
        <tr>
            <td><div class="play" id="btn2" >play </div></td>
            <td align="left">Sound 2</td>
            <td align="left">клип</td>
            <td align="left">текст</td>
            <td align="left">минусовка</td>
            <td align="left">скачать</td>
        </tr>
        <tr>
            <td><div class="play" id="btn3" >play </div></td>
            <td align="left">Sound 3</td>
            <td align="left">клип</td>
            <td align="left">текст</td>
            <td align="left">минусовка</td>
            <td align="left">скачать</td>
        </tr>
    </table>
<audio id="sound1">
        <source src="/mp3/111.mp3" type="audio/mp3" />
    </audio>

    <audio id="sound2">
        <source src="/mp3/2.mp3" type="audio/mp3" />
    </audio>

    <audio id="sound3">
        <source src="/mp3/2.mp3" type="audio/mp3" />
    </audio>

 <script>
        $('.play').click(function(){
            var $this = $(this);
            var $id = $this.attr('id').replace(/btn/, '');
            for($i=1;$i<4;$i++){
                if($i!=$id){
                    $('#btn'+$i).click();
                }
            }
        });
        

 $('.play').click(function(){
            var $this = $(this);
            var id = $this.attr('id').replace(/btn/, '');
            $this.toggleClass('active');
            if($this.hasClass('active')){
                $this.text('pause');
                $('audio[id^="sound"]')[id-1].play();
            } else {
                $this.text('play');
                $('audio[id^="sound"]')[id-1].pause();
            }
        });
    </script>
  • Вопрос задан
  • 57 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
const $audio = $('audio');
const $play = $('.play').click(function() {
  const index = $(this).closest('tr').index();
  const paused = $audio[index].paused;

  $audio.each((i, n) => n[i === index && paused ? 'play' : 'pause']());
  $play
    .text(i => i === index && paused ? 'pause' : 'play')
    .removeClass('active')
    .eq(index)
    .toggleClass('active', paused);
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы