要实现多个互相停止的音频播放按钮,可以通过以下步骤来实现:
<button id="playBtn1">播放音频1</button>
<button id="playBtn2">播放音频2</button>
<button id="playBtn3">播放音频3</button>
// 创建音频对象
var audio1 = new Audio('audio1.mp3');
var audio2 = new Audio('audio2.mp3');
var audio3 = new Audio('audio3.mp3');
// 创建状态变量
var currentAudio = null;
// 按钮点击事件监听器
document.getElementById('playBtn1').addEventListener('click', function() {
// 停止当前播放的音频
if (currentAudio !== null && !currentAudio.paused) {
currentAudio.pause();
}
// 播放音频1
audio1.play();
currentAudio = audio1;
});
document.getElementById('playBtn2').addEventListener('click', function() {
// 停止当前播放的音频
if (currentAudio !== null && !currentAudio.paused) {
currentAudio.pause();
}
// 播放音频2
audio2.play();
currentAudio = audio2;
});
document.getElementById('playBtn3').addEventListener('click', function() {
// 停止当前播放的音频
if (currentAudio !== null && !currentAudio.paused) {
currentAudio.pause();
}
// 播放音频3
audio3.play();
currentAudio = audio3;
});
这样,当点击一个音频播放按钮时,会停止当前正在播放的音频,并播放所点击的音频。这样就实现了多个互相停止的音频播放按钮。
注意:以上代码只是一个简单的示例,实际应用中可能需要更复杂的逻辑和界面设计。此外,为了实现更好的用户体验,还可以添加音频加载状态的处理、播放进度条、音量控制等功能。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云