Как использовать аудиоплеер несколько раз на одной странице?

Question

У меня есть маленький проигрыватель подкастов:

<div class="pcast-player">
  <div class="pcast-player-controls">
  <button class="pcast-play"><i class="fas fa-play fa-fw"></i></button>
  <button class="pcast-pause"><i class="fas fa-pause fa-fw"></i></button>
  <progress class="pcast-progress" value="0"></progress>
  <button class="pcast-mute" id="mute"><i class="fas fa-volume-up fa-fw"></i></button>
  <button class="pcast-unmute" id="unmute"><i class="fas fa-volume-off fa-fw"></i></button>
  <ul>
    <li class="pcast-currenttime pcast-time">00:00:00</li>
    <li class="pcast-duration pcast-time">00:00</li>
  </ul>
  </div>
  <audio src="/audio/intro.mp3" id="mute-toggle"></audio>
</div>

Теперь, возможно ли использовать этот проигрыватель несколько раз на одной странице, не меняя каждый раз классы (pcast-play1, pcast-play2 и т. Д ...)? Так что, если я нажму первый, то не все из них сработают ....

Я думал о данных- *, но я не совсем уверен, как справиться с этими ... пожалуйста, помогите, спасибо

JS (начало)

var pcastPlayers = document.querySelectorAll('.pcast-player');

for(i=0;i<pcastPlayers.length;i++) {
var player = pcastPlayers[i];
var audio = player.querySelector('audio');
var play = player.querySelector('.pcast-play');
var pause = player.querySelector('.pcast-pause');
var progress = player.querySelector('.pcast-progress');
var mute = player.querySelector('.pcast-mute');
var unmute = player.querySelector('.pcast-unmute');
var currentTime = player.querySelector('.pcast-currenttime');
var duration = player.querySelector('.pcast-duration');

var currentSpeedIdx = 0;

play.addEventListener('click', function(){
  this.style.display = 'none';
  pause.style.display = 'inline-block';
  pause.focus();
  audio.play();
}, false);

pause.addEventListener('click', function(){
  this.style.display = 'none';
  play.style.display = 'inline-block';
  play.focus();
  audio.pause();
}, false);

и так далее ...

Answer 1

В каждом цикле вы будете переопределять параллельные переменные и EventListener, потому что они глобальные и не входят в область действия цикла for. Один из простых способов обойти это - просто использовать let или const вместо var, поскольку они являются: а) блокобласти b) обычно предпочтительнее в современной разработке JS.

См. рабочий пример , где два аудиофайла управляются отдельно

https://jsfiddle.net/4x0esndj/