首先，使用 document.querySelectorAll('audio') 方法获取页面上所有的 audio 标签元素。
然后，通过 forEach 循环为每个 audio 标签添加 play 事件监听器。
当某个 audio 标签触发 play 事件时，再次遍历所有的 audio 标签，将除了正在播放的 audio 标签之外的其他 audio 标签都暂停播放。
请确保将 src 属性的值替换为实际的音频文件路径。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>禁止两个 audio 标签同时播放</title>
</head>
<body>
<audio id="audio1" controls>
<source src="audio1.mp3" type="audio/mpeg">
</audio>
<audio id="audio2" controls>
<source src="audio2.mp3" type="audio/mpeg">
</audio>
<script>
const audioElements = document.querySelectorAll('audio');
audioElements.forEach((audio) => {
audio.addEventListener('play', function () {
audioElements.forEach((otherAudio) => {
if (otherAudio!== this) {
otherAudio.pause();
}
});
});
});
</script>
</body>
</html>
文章版权声明：
1、本网站名称：菜鸟小站
2、本站永久网址：https://mo.cnzv.cc
3、本网站的文章部分内容可能来源于网络，如有侵权，请联系站长 QQ7419838 进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
发表评论