播放暂停按钮有问题

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:[email protected]?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 loop中生成带有ID的音频元素。

<audio id="audio" >

由于该ID必须是唯一的，所以将该ID更改为类。

<audio class="audio" >

现在，您必须更改脚本，以便停止其他音频元素并启动当前的音频元素。您也可以使用audio元素的paused属性检查它是否被暂停。

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

$('.play-pause').click(function() {
    if ($(this).sibblings('.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).text("stop sound");

    } else {
      $(this).siblings('.audio').get(0).pause();
      $(this).text("restart sound");
    }
  });
});