Проблема с кнопкой паузы воспроизведения

Question

Я понимаю кнопку воспроизведения / паузы для списка песен. Кнопка работает правильно, но работает только с первой песней в списке, пожалуйста, проверьте проблему здесь https://www.superbackings.com Я не уверен, что я делаю неправильно.

<script type="text/javascript">
  $(document).ready(function() {
    var playing = false;

    $('.play-pause').click(function() {
        if (playing == false) {
            document.getElementById('audio').play();
            playing = true;
            $(this).text("stop sound");

        } else {
            document.getElementById('audio').pause();
            playing = false;
            $(this).text("restart sound");
        }
    });
  });
</script>  

Это foreach

<table class=" table table-hover table-dark ">

                    <?php 

                    if (!$_GET) {

                        header ('Location: list.php?page=1');
                    }


                    ?>

                    <thead>
                        <tr>
                            <!-- <th>ID</th> -->
                            <th>Demo</th>
                            <th>Song name</th>
                            <th>Artist</th>
                            <th>Price</th>
                            <th>Version</th>
                            <th>Request</th>
                        </tr>
                    </thead>

                    <tbody>
                        <?php foreach ($tracks as $key => $listado): ?>

                            <?php 

                            $nameUrl = strtolower(str_replace(" ", "-", $listado->name));

                            ?>
                            <tr>

                                <td style="width: 25%;"><?php echo '
                                <audio id="audio" > 
                                <source src="demos/' . $listado->demo . '" type="audio/mp4"/> 
                                </audio> 
                                <a type="button" class="play-pause" title="play/pause"><i class="fa fa-play"></i></a>

                                '?></td>

                                <td style="width: 25%;"><?php echo $listado->name ?></td>
                                <td style="width: 25%;"><?php echo $listado->artist_name ?></td>
                                <td ><?php echo '€' . $listado->precio ?></td>
                                <td ><?php echo $listado->tipo ?></td>
                                <td style="width: 15%;"><a href="mailto:beth@superbackings.com?subject=Listed song request&body=Hello, I want to buy the song (<?php echo $nameUrl . ')' . ' from the artist ( ' . $listado->artist_name  . ')' . ' ID ' . $listado->id ; ?>"><button type="button" class="btn btn-warning">REQUEST</button></a></td>
                            </tr>

                        <?php endforeach ?>

                    </tbody>
                </table>

Вы можете увидеть проблему здесь https://www.superbackings.com

Answer 1

Вы генерируете аудиоэлементы с идентификатором в цикле php for.

<audio id="audio" >

Измените этот идентификатор на класс, так как идентификатор должен быть уникальным.

<audio class="audio" >

Теперь вам нужно изменить свой сценарий, чтобы вы остановили другие аудиоэлементы и запустили текущий. Также вы можете использовать свойство paused элемента audio, чтобы проверить, приостановлен он или нет.

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

$('.play-pause').click(function() {
    if ($(this).siblings('.audio').get(0).paused) {
      //pause all audio
      $('.audio').each(function(){
        this.pause();
      });
      //start the sibbling audio of the current clicked button, the get function gets the dom object instead of the jQuery object
      $(this).siblings('.audio').get(0).play();
      $(this).find('.fa').removeClass('fa-play').addClass('fa-pause');

    } else {
      $(this).siblings('.audio').get(0).pause();
      $(this).find('.fa').removeClass('fa-pause').addClass('fa-play');
    }
  });
});