Problem with javascript code

Question

Problem with javascript code

Navigation

#1 by (2 votes)

1

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

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 on the play button, it will turn red with the STOP sign to stop, if I click on the player.

The problem is when I click the other "play", the other buttons should turn blue, but it does not turn red, I would like it to turn blue and red only in the song that is playing. Here's the example of how you're currently in the image below:

And so, how to fix this?

javascript html5

asked by anonymous 25.09.2017 / 00:53

1 answer

Elements after Hover Selector Increase content found by regex and increment with other strings

score 2 · Accepted Answer

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

Assuming your stop buttons have class btn btn-danger as indicated in the comments, you only need to change your PlayerRoduzir function to:

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 that made play and stop it. For this it is necessary a new variable to save the id of the last touched.

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 id refers to the function parameter and not this variable.
You may have to adjust the selector used in the first example, .btn.btn-danger to a more specific, using HTML on your page