Есть сайт со списком музыки. список может динамически добавляться.

Question

Есть сайт со списком музыки. список может динамически добавляться.

Алекс Глостер Мыслитель (6037), на голосовании 1 год назад

при нажатии на кнопку проиграть появляется плейер. он должен проиграть выбранный трек. но проигрывает сразу оба одновременно. код разместил на codepen. там видно что foreach выбирает сразу два элемента из массива, поэтому и проигрывает сразу два. как сделать что бы играл только выбранный трек. подскажите как решить такую задачу.
---------------------
Код здесь:
codepen.io/vvv7220/pen/yLRwewW?editors=1011

 let track_play = document.querySelectorAll('.track_play'); 
let btn_play = document.querySelectorAll('.btn_play'); 
let player = document.querySelector('.audio_player'); 
let start_play = document.querySelectorAll('#player'); 
 
// При нажатие на кнопку появляется управление плейером 
        btn_play.forEach(function(item){ 
            item.addEventListener("click", function() { 
                player.classList.add('show'); 
            }); 
            console.log(item); 
        }); 
 
// Управление плейером 
function play_audio(){ 
    start_play.forEach(function(item){ 
            item.play(); 
            console.log(item); 
    }); 
      
}

Answer 1

Для решения вашей проблемы, вам нужно изменить код таким образом, чтобы при нажатии на кнопку проигрывания, проигрывался только выбранный трек. Вот исправленный код:

HTML:
```html
<article>
<table>

<tr>
<td><button class="btn_play" data-src="files/20230517092142.mp3">
<div class='track_play'>
<div class='equalizer'>
<div class='equalizer-bar'></div>
<div class='equalizer-bar'></div>
<div class='equalizer-bar'></div>
<div class='equalizer-bar'></div>
</div>
</div>
</button></td>
<td>Sewer Blues</td>

</tr>

</table>
</article>
<audio id="player"></audio>
```

JavaScript:
```javascript
let btn_play = document.querySelectorAll('.btn_play');
let player = document.getElementById('player');

// При нажатие на кнопку появляется управление плейером
btn_play.forEach(function(item){
item.addEventListener("click", function() {
let trackSrc = item.getAttribute('data-src');
player.src = trackSrc;
player.play();
});
});
```

В этом коде я удалил аудио элемент из каждой кнопки и добавил один общий аудио элемент с идентификатором "player" в конце HTML. Затем, я добавил атрибут `data-src` для каждой кнопки, содержащий ссылку на аудио файл. В JavaScript коде, я изменил обработчик событий для кнопок, чтобы при нажатии на кнопку, аудио элемент получал ссылку на аудио файл из атрибута `data-src` и начинал воспроизведение.