如何在一个页面上多次使用音频播放器？

Posted 2023-02-25

【中文标题】如何在一个页面上多次使用音频播放器？

【英文标题】：How to use a audio player multiple times on a single page?

【发布时间】：2018-05-11 22:16:35

【问题描述】：

我有一个小播客播放器：

<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);

等等……

【问题讨论】：

如果没有复制问题的完整示例（包括 html 和 JS），很难提供帮助。当然你可以让它只播放其中一个音频，只要正确设置逻辑即可。

我添加了一些...

【参考方案1】：

在每个循环中，您都将覆盖并发变量和事件监听器，因为它们是全局的并且不在 for 循环的范围内。避免这种情况的一种简单方法是简单地使用 let 或 const 而不是 var，因为它们 a) 块作用域 b) 在现代 JS 开发中通常首选。

参见working example，其中两个音频文件分别控制

https://jsfiddle.net/4x0esndj/