如何通过onclick按钮让用户选择是否开启音频循环？

你可以通过JavaScript结合按钮点击事件来实现用户手动控制音频是否循环播放，具体实现代码如下：

HTML 结构 #

<audio controls id="myAudio">
  <source src="audio.mp3">
</audio>
<button id="loopToggle">开启循环</button>

JavaScript 逻辑 #

const audio = document.getElementById('myAudio');
const toggleBtn = document.getElementById('loopToggle');

// 初始设置为不循环，可根据需求修改
audio.loop = false;

toggleBtn.addEventListener('click', () => {
  // 切换循环状态
  audio.loop = !audio.loop;
  // 更新按钮文本，提示当前状态
  toggleBtn.textContent = audio.loop ? '关闭循环' : '开启循环';
});

功能说明 #

• 移除了audio标签默认的loop属性，改为通过JS动态控制循环状态，更灵活
• 点击按钮时会切换音频的循环模式，同时按钮文本会同步更新，让用户直观了解当前状态
• 如果需要默认开启循环，只需把audio.loop = false改为audio.loop = true，并将按钮初始文本设为关闭循环即可

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