事件中动态控制音频循环变量详解

解决方案的核心思路是：将当前激活的音频索引“状态化”并存储在 DOM 中，供任意事件处理器读取。推荐使用 <input type="hidden"> 元素作为轻量级状态容器：

✅ 首先，在 HTML 文档中添加隐藏字段（建议置于 底部或表单内）：

<input type="hidden" id="activei" value="0">

✅ 接着，在 playStop(i) 函数中同步更新该字段值（确保每次点击播放/暂停按钮时记录最新索引）：

function playStop(i) {
    // 更新当前激活索引
    document.getElementById("activei").value = i;

    // 获取对应音频元素并控制播放/暂停
    const audio = document.getElementById("audio" + i);
    if (audio.paused) {
        audio.play();
        document.getElementById("playbtn" + i).textContent = "❚❚";
    } else {
        audio.pause();
        document.getElementById("playbtn" + i).textContent = "▷";
    }
}

✅ 最后，在进度条点击事件中，通过读取隐藏字段获取 i，再定位目标

const progressbar = document.getElementById("progress-bar");
progressbar.onclick = function(e) {
    const i = parseInt(document.getElementById("activei").value, 10);
    const audio = document.getElementById("audio" + i);

    if (audio && !isNaN(audio.duration)) {
        const newTime = (e.offsetX / progressbar.offsetWidth) * audio.duration;
        audio.currentTime = Math.max(0, Math.min(newTime, audio.duration));
    }
};

⚠️ 注意事项：

• 确保 playStop(i) 在用户首次点击任一播放按钮时被调用，否则 activei 值仍为初始值（如 0），可能导致进度条误操作首个音频；
• 若支持多音频同时播放，此方案需升级为更精细的状态管理（如记录 currentPlayingId 或使用 data-* 属性绑定上下文）；
• 建议为 audio 元素添加 preload="metadata" 属性，确保 duration 可及时获取，避免 NaN 错误；
• 生产环境推荐用 addEventListener 替代内联 onclick，提升可维护性与安全性。

该方法简洁可靠，无需引入框架或复杂状态库，完美适配传统 PHP+JS 混合开发模式。

到这里，我们也就讲完了《事件中动态控制音频循环变量详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！