如何用HTML、CSS实现点击复选框播放音效？代码运行失败如何解决

核心错误点 #

• <label>标签没有onchange事件，该事件仅支持input、select等表单元素，绑定在label上的播放逻辑永远不会触发
• 复选框input上的onchange="myfunction"语法错误，函数调用需要加括号，正确写法是myfunction()
• 音效触发逻辑绑定位置错误，应该绑定到复选框的change事件上

修复后的代码 #

<audio id="myaudio" src="img/toggle.mp3" ></audio>

<div class="buttonpos">
    <!-- 如果需要同时执行原有myfunction，写法为onchange="myfunction(); document.getElementById('myaudio').play()" -->
    <input class="toggle" onchange="document.getElementById('myaudio').play()" type="checkbox" id="switch">
    <label for="switch" class="switchLabel">
        <span class="switchLabelBg"></span>
    </label>
</div>

可选优化 #

如果要避免多次快速点击出现音效重叠，可把播放逻辑抽为函数，每次播放前重置音频进度：

function playToggleAudio() {
  const audioEl = document.getElementById('myaudio')
  // 重置播放进度到开头
  audioEl.currentTime = 0
  audioEl.play()
}

修改复选框的onchange属性为onchange="playToggleAudio()"即可。

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