Problem with javascript code

Question

I have a problem with javascript, yes for lack of knowledge of the language.

The following, the code below makes a song from a search list play by clicking on "Play".

Javascript:

<script>
    function PlayerRoduzir(id) {
        var id;
        change("https://api.xxxxxx.com/tracks/" + id +".mp3");
        var button1 = document.getElementById("play_" + id).style.display = "none";
        var button2 = document.getElementById("stop_" + id).style.display = "";
      }

    function PlayerParar(id){
        var id;
      var audio = document.getElementById("player");
      var source = document.getElementById("mp3_src");
      var button1 = document.getElementById("play_" + id).style.display = "";
      var button2 = document.getElementById("stop_" + id).style.display = "none";
      audio.pause();
    }
</script>

PHP/HTML:

<?php 
echo "<button type='button' id='play_".$id."' onClick='PlayerRoduzir(".$id.");' class='btn btn-info'><i class=\"fa fa-play-circle-o\" aria-hidden=\"true\"></i></button> ";
echo "<button type='button' style='display: none;' id='stop_".$id."' onClick='PlayerParar(".$id.");' class='btn btn-danger'><i class=\"fa fa-stop\" aria-hidden=\"true\"></i></button> ";
?>

When I click play the playback button turns red with the STOP signal to stop, if I click back the player.

The problem is when I click on the other "play", the other buttons should turn blue, but it doesn’t turn red, I would like it to turn blue and red only in the song that is playing. See the example of how it is currently in the image below:

And then, how to fix it?

Answer 1

The simplest solution to your problem is to ensure that for all songs stop when you will play a new one. To do this you can scroll through all the buttons stop by javascript and calling its functions click.

Assuming that your buttons stop has the class btn btn-danger as indicated in the comments, just need to change its function of PlayerRoduzir for:

function PlayerRoduzir(id) {

    //obter todos os botões de stop
    const botoesStop = document.querySelectorAll(".btn.btn-danger");

    for (let botao of botoesStop){ //percorrer todos
        botao.click(); //chamar o click em cada um o que para todos
    }

    //aqui continua e toca aquele em que se fez play

    change("https://api.xxxxxx.com/tracks/" + id +".mp3");
    var button1 = document.getElementById("play_" + id).style.display = "none";
    var button2 = document.getElementById("stop_" + id).style.display = "";
}

---

A better and more efficient solution would be to memorize the last song you made play and stop only this. This requires a new variable to store the id last time.

let idUltima = -1; //começa com -1 que indica que não tem nenhuma a tocar

function PlayerRoduzir(id) {
    if (idUltima != -1) { //se vai tocar mas ainda há outra a tocar
        PlayerParar(idUltima); //agora para a ultima que ainda estava a tocar
    }

    change("https://api.xxxxxx.com/tracks/" + id +".mp3");
    var button1 = document.getElementById("play_" + id).style.display = "none";
    var button2 = document.getElementById("stop_" + id).style.display = "";

    idUltima = id; //marca esta como a ultima musica a tocar
}

function PlayerParar(id){

    var audio = document.getElementById("player");
    var source = document.getElementById("mp3_src");
    var button1 = document.getElementById("play_" + id).style.display = "";
    var button2 = document.getElementById("stop_" + id).style.display = "none";
    audio.pause();

    idUltima = -1; //limpa a ultima musica a tocar
}

Notes:

• Remove the var id; that has within the functions because they do nothing, since the id refers to the function parameter and not that variable.
• You may have to adjust the selector used in the first example, .btn.btn-danger for a more specific, by means of the HTML that you have on your page