Javascript 如何在一个页面上多次使用音频播放器?
我有一个小播客播放器:Javascript 如何在一个页面上多次使用音频播放器?,javascript,jquery,html,css,audio,Javascript,Jquery,Html,Css,Audio,我有一个小播客播放器: <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-
<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);
依此类推……在每个循环上,您将覆盖并发变量和EventListener,因为它们是全局的,不在for循环的范围内。避免这种情况的一个简单方法是简单地使用let或const而不是var,因为它们是现代JS开发中通常首选的块范围b 查看两个音频文件分别控制的位置
如果没有一个完整的例子来复制这个问题(包括HTML和JS),很难提供帮助。当然,你可以让它只播放一个音频,这只是一个正确设置逻辑的问题。我添加了一些。。。