GetElementById возвращает только последнее значение из var - PullRequest
Новая
       14

GetElementById возвращает только последнее значение из var

0 голосов
/ 23 октября 2019

Это в основном звуковая панель, которая создает <audio> для каждого трека в базе данных. Я пытаюсь создать панель громкости для каждого <audio>, но все эти полосы громкости меняются только на последнюю <audio>, я считаю, что есть что-то делать с GetElementById (), так как он получает один идентификатор на элемент. 

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

Я пробовал во многих формах, но безуспешно.

...