1

Estou desenvolvendo um soundboard, e nesse código, cada <audio> é gerado por registro encontrado no banco de dados, e cada um deles tem um controlador de volume, porém, todos os controladores apenas funcionam pro último <audio> gerado, creio que seja porque cada iteração sobrescreve o último id, alguma ideia de como posso gerar uma barra de volume pra cada faixa?

<?php
        while($teste = $usr_idLogged_aTracks_r->fetch_assoc()) { 
            $trackId = $teste['atrack_id'];
            $trackTitle = $teste['atrack_title'];
            $trackPath = $teste['atrack_path'];
            $trackPlaylist = $teste['atrack_playlistId']; ?>

        <div class="col-md-6 col-sm-12 col-xs-12" >
          <div class="x_panel">
            <div class="x_title">
              <h2><?php echo $trackTitle ?> <small> <?php echo $trackId ?> </small></h2>
              <ul class="nav navbar-right panel_toolbox">
                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Settings 1</a>
                    </li>
                    <li><a href="#">Settings 2</a>
                    </li>
                  </ul>
                </li>
                <li><a class="close-link"><i class="fa fa-close"></i></a>
                </li>
              </ul>
              <div class="clearfix"></div>
            </div>
            <div class="x_content">
            <div class="row">

                <audio style=" width: 100%; max-width: 600px" id="<?php echo $trackId ?>" controls>
                    <source src="<?php echo $trackPath ?>" type="audio/mp3">
                </audio>

                <input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>

                <button onclick="document.getElementById('<?php echo $trackId ?>').play()">Reproduzir o áudio</button>
                <button onclick="document.getElementById('<?php echo $trackId ?>').pause()">Pausar o áudio</button>.

                <script type="text/javascript">
                    window.SetVolume = function(val) {

                            var player = document.getElementById('<?php echo $trackId ?>');
                            console.log('Before: ' + player.volume);
                            player.volume = val / 100;
                            console.log('After: ' + player.volume);
                    }
                </script>
            </div>
            </div>
          </div>
         </div>
        <?php }
        ?>

1 Resposta 1

1

Faça as seguintes alterações:

Altere de:

<input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>

Para:

<input id="vol-control_<?php echo $trackId; ?>" class="volume" type="range" min="0" max="100" step="1" />

O segredo será aqui: vol-control_<?php echo $trackId; ?> (_)

FORA do laço for, faça o seguinte:

<script>
var volume = document.getElementsByClassName("volume");
for (let i = 0; i < volume.length; i++) {
  volume[i].oninput = function(ev) {
    var id = ev.target.id;
    var val = ev.target.value;
    var player = document.getElementById(id.split("_")[1]);

    console.log('Before: ' + player.volume);
    player.volume = val / 100;
    console.log('After: ' + player.volume);
  }
}
</script>

Retire a parte do javascript que você tinha colocando no seu código:

<script type="text/javascript">
                    window.SetVolume = function(val) {

                            var player = document.getElementById('<?php echo $trackId ?>');
                            console.log('Before: ' + player.volume);
                            player.volume = val / 100;
                            console.log('After: ' + player.volume);
                    }
                </script>

Código Completo:

while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { 
//Tive que fazer isso só pra demo. Mas você deve mudar no seu código 
$trackId = $row['OrderID']; 
$trackTitle = $row['CustomerID']; 
$trackPath = $row['EmployeeID']; 
$trackPlaylist = $row['OrderDate']; ?>
<div class="col-md-6 col-sm-12 col-xs-12">
  <div class="x_panel">
    <div class="x_title">
      <h2>
        <?php echo $trackTitle ?> <small> <?php echo $trackId ?> </small></h2>
      <ul class="nav navbar-right panel_toolbox">
        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Settings 1</a>
            </li>
            <li><a href="#">Settings 2</a>
            </li>
          </ul>
        </li>
        <li><a class="close-link"><i class="fa fa-close"></i></a>
        </li>
      </ul>
      <div class="clearfix"></div>
    </div>
    <div class="x_content">
      <div class="row">

        <audio style=" width: 100%; max-width: 600px" id="<?php echo $trackId ?>" controls>
                <source src="https://www.w3schools.com/html/horse.ogg" type="audio/mp3">
            </audio>

        <input id="vol-control_<?php echo $trackId; ?>" data-id="<?php echo $trackId; ?>" class="volume" type="range" min="0" max="100" step="1" />

        <button onclick="document.getElementById('<?php echo $trackId ?>').play()" class="reproduzir">Reproduzir o áudio</button>
        <button onclick="document.getElementById('<?php echo $trackId ?>').pause()" class="pausar">Pausar o áudio</button>.

      </div>
    </div>
  </div>
</div>
<?php
}
?>
<script>
  var volume = document.getElementsByClassName("volume");

  for (let i = 0; i < volume.length; i++) {
    volume[i].oninput = function(ev) {
      var id = ev.target.id;
      var val = ev.target.value;
      var player = document.getElementById(id.split("_")[1]);
      console.log('Before: ' + player.volume);
      player.volume = val / 100;
      console.log('After: ' + player.volume);
    }
  }
</script>

2
  • Boa! Era isso mesmo, eu não tava conseguindo colcoar o script fora do loop. Commented 24/10/2019 às 19:57
  • Que bom! Tamo junto. Ah! Fiz com javascript puro, mas com JQuery(caso você conheça), é facilzinho também e com muito menos código. Commented 24/10/2019 às 19:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .