Javascript 如何制作多个播放按钮？

我有一个按钮的代码，如何做多个？

我试着绕过所有的元素，但曲目同时播放

在jquery上我做到了，但在本机JavaScript上我做不到

window.onload=function（）{
var myAudio=document.getElementById（'my-audio'）；
var play=document.getElementById（'play'）；
var pause=document.getElementById（'pause'）；
var loading=document.getElementById（'loading'）；
var bar=document.getElementById（'bar'）；
函数displayControls（）{
load.style.display=“无”；
play.style.display=“block”；
}
//在显示控件之前，请检查介质是否已准备就绪
如果（myAudio.paused）{
显示控件（）；
}否则{
//尚未准备好-等待canplay事件
myAudio.addEventListener（'canplay'，function（）{
显示控件（）；
});
}
play.addEventListener（'click'，function（）{
myAudio.play（）；
play.style.display=“无”；
pause.style.display=“block”；
});
pause.addEventListener（'click'，function（）{
myAudio.pause（）；
pause.style.display=“无”；
play.style.display=“block”；
});
//显示进度
myAudio.addEventListener（'timeupdate'，function（）{
//设置百分比
bar.style.width=parseInt（（myAudio.currentTime/myAudio.duration）*100），10）+“%”；
});
}

#控件{
宽度：80px；
浮动：左；
}
#进展{
左边距：80px；
边框：1px纯黑；
}
#酒吧{
高度：20px；
背景颜色：绿色；
宽度：0；
}

加载
玩
暂停

我不知道您想要实现什么，但似乎您正在尝试重新发明轮子

您知道可以在HTML5音频播放器上启用控件吗？：）

---

我不知道您想要实现什么，但似乎您正在尝试重新发明轮子

您知道可以在HTML5音频播放器上启用控件吗？：）

---

像这样的东西会对你有所帮助

生成函数而不是window.onload并对其进行参数化。。然后在start函数中调用每个函数

function start(){
  buildOne( 'my-audio', 'play', 'pause', 'loading', 'bar' );
  buildOne( 'my-audio2', 'play2', 'pause2', 'loading2', 'bar2' );
}

window.onload = start;

---

完整的示例如下：

类似的内容将帮助您

生成函数而不是window.onload并对其进行参数化。。然后在start函数中调用每个函数

function start(){
  buildOne( 'my-audio', 'play', 'pause', 'loading', 'bar' );
  buildOne( 'my-audio2', 'play2', 'pause2', 'loading2', 'bar2' );
}

window.onload = start;

---

完整的例子如下：

是的，我知道。但我需要一个自定义按钮。页面上有几个播放按钮，可在暂停时更改。不需要更多控件。进度条仅用于一个可视示例（突然有人没有声音），我也将其删除。@Massef“页面上有几个播放按钮，可在暂停时更改。“你是什么意思？”？为什么需要几个播放按钮？该页面有一个曲目目录，您可以收听。每个曲目只有一个按钮播放。您也可以暂停，只需将按钮替换为“显示/隐藏”。例如，如果播放某一曲目，用户单击另一曲目上的播放按钮，则前一曲目将停止播放。是的，我知道。但我需要一个自定义按钮。页面上有几个播放按钮，可在暂停时更改。不需要更多控件。进度条仅用于一个可视示例（突然有人没有声音），我也将其删除。@Massef“页面上有几个播放按钮，可在暂停时更改。“你是什么意思？”？为什么需要几个播放按钮？该页面有一个曲目目录，您可以收听。每个曲目只有一个按钮播放。您也可以暂停，只需将按钮替换为“显示/隐藏”。例如，如果播放某一曲目，用户单击另一曲目上的播放按钮，则前一曲目将停止播放。谢谢您的回答。页面上的元素数量并不总是相同的。此选项不适用。我试着用class代替id并通过click方法（就像jquery中的每个方法一样），但是没有成功。谢谢你的回答。页面上的元素数量并不总是相同的。此选项不适用。我尝试创建类而不是id，并遍历click方法（就像jquery中的每个方法），但没有成功。