-4

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

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

halfer
  • 19,824
  • 17
  • 99
  • 186
Nicolas
  • 11
  • 3
  • 1
    Hello, please can you post your question in English, as you are on the English language Stack Overflow. – Dragonthoughts Oct 07 '19 at 12:12
  • 2
    https://es.stackoverflow.com/ – Patrick Q Oct 07 '19 at 12:13
  • Ready... sorry! – Nicolas Oct 07 '19 at 12:16
  • The title too, please. – deceze Oct 07 '19 at 12:18
  • Even so, the description of the problem is pretty unclear and vague. You'll need to describe better what you want it to do and what it does instead. – deceze Oct 07 '19 at 12:19
  • Check this one for reference. https://stackoverflow.com/questions/4646998/play-pause-html-5-video-using-jquery?rq=1 – Rahul Gupta Oct 07 '19 at 12:27
  • 1
    @Nicolas Can you also add how the list of multiple songs looks like? – Mark Baijens Oct 07 '19 at 12:29
  • yes.. I will add the full code now. – Nicolas Oct 07 '19 at 12:32
  • I'd say it's probably because of ` – Patrick Q Oct 07 '19 at 12:42
  • What @PatrickQ said is correct. Id's need to be unique and you generate multiple elements with the audio id in your foreach loop. Change the audio id to a class and use `$(this).sibblings('.audio').get(0).play()` – Mark Baijens Oct 07 '19 at 12:48
  • could you help me to fix it. don't know how to do it. – Nicolas Oct 07 '19 at 12:50
  • @Nicolas There are multiple ways to address the issue. It kind of comes down to personal preference. Do you _understand_ the issue as we've explained it? Because telling you what to do won't really help you if you don't actually understand the root issue. – Patrick Q Oct 07 '19 at 12:54
  • No my friend I don't understand it. I am a newbye. – Nicolas Oct 07 '19 at 12:56
  • I mean I do understand but I don't know how to apply that. – Nicolas Oct 07 '19 at 13:00

1 Answers1

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');
    }
  });
});
Mark Baijens
  • 13,028
  • 11
  • 47
  • 73