播放暂停按钮有问题

Question

我正在实现歌曲列表的 play/pause 按钮。该按钮工作正常，但仅适用于列表的第一首歌曲，请在此处检查问题 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 循环中生成带有 id 的音频元素。

<audio id="audio" >

将该 ID 更改为 class，因为 ID 必须是唯一的。

<audio class="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');
    }
  });
});

播放暂停按钮有问题

Trouble with play pause button

html

javascript

php

playback

pause