切换式音频按钮可播放无法暂停、多音频同时播放问题求助

问题原因 #

• 每次点击按钮都会触发controlAudio函数，函数内部每次都会创建一个全新的Audio实例，导致每次点击都会生成新的音频播放进程，之前的音频没有被销毁也无法控制，自然就出现了叠加播放、无法暂停的问题
• 绑定点击事件时写的是audioPlayBtn.addEventListener("click",audioScore(),false)，这里audioScore()带括号会直接执行函数，不是把函数作为回调传给事件监听，逻辑完全不符合预期
• 同时给按钮绑定了onclick属性和addEventListener，重复绑定事件会导致逻辑多次触发
• CSS代码存在语法笔误：padding:bottom:0;属于错误写法

修复代码 #

调整逻辑为全局仅初始化一次音频实例和事件绑定，不要重复创建对象：

修正后HTML #

<button id="audioPlayPauseBtn" class="musicInitializerBtn">
  || Soundtrack Score (2013)
</button>

修正后CSS #

.musicInitializerBtn {
    border-top:7px solid gold;
    border-radius:70%;
    cursor:pointer;
    color:#444;
    font-size:1.06rem;
    font-weight:900;
    padding:4px;
    padding-top:0;
    padding-bottom:0; /* 修正原语法错误 */
    background:orange;
}
.musicInitializerBtn:hover{
    color:#000;
}

修正后JS #

// 页面加载完成后再初始化元素和音频
document.addEventListener('DOMContentLoaded', () => {
    // 全局只初始化一次音频实例和按钮引用
    const audio = new Audio('./music/HolyWaterFaster.mp3');
    const audioPlayBtn = document.getElementById("audioPlayPauseBtn");

    // 绑定点击事件，直接传函数引用不要加括号
    audioPlayBtn.addEventListener("click", audioScore, false);

    function audioScore(){
        if (audio.paused){
            audio.play();
            audioPlayBtn.innerHTML = "► Soundtrack Score (2013)";
            audioPlayBtn.style.color = "white";
        }else{
            audio.pause();
            audioPlayBtn.innerHTML = "||";
            audioPlayBtn.style.color = "beige";
        }
    }
})

内容的提问来源于stack exchange，提问作者JavaTheHut