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