Trouble with play pause button

Question

I'm realizing a play/pause button for a song list. The button is working properly, but only works with the first song of the list please checkout the issue here https://www.superbackings.com I'm not sure what am I doing wrong.

<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>  

This is the 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>

You can see the issue here https://www.superbackings.com

Answer 1

You generate the audio elements with an id in your php for loop.

<audio id="audio" >

Change that id to a class since id's need to be unique.

<audio class="audio" >

Now you have to change your script so that you stop other audio elements and start the current one. Also you can use the paused property of the audio element to check if it's paused or not.

$(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');
    }
  });
});