单页面多音频文件的JavaScript自定义控件实现问题求助

问题根源 #

你遇到的所有错误本质都是把HTMLCollection集合当成单个DOM元素操作：

• getElementsByClassName返回的是类数组集合，不是单个元素，直接设置audio.controls = false或audioControls.style.display必然报错
• 多个音频实例需要一对一绑定控件与音频，不能全局操作所有元素

第一步：修正PHP的HTML结构小问题 #

section的id属性不能包含空格，先把错误的id="demos widthWrap"改成：

<section id="demos" class="widthWrap">

第二步：重构JavaScript代码 #

核心思路是以每个音频容器（.demoBox）为单位遍历，确保每个控件只对应自己容器内的音频，避免全局混淆：

const supportsAudio = !!document.createElement("audio").canPlayType;
if (supportsAudio) {
    // 把HTMLCollection转成数组，方便遍历操作
    const demoBoxes = Array.from(document.getElementsByClassName("demoBox"));

    demoBoxes.forEach(box => {
        // 从当前容器内获取对应元素，确保一对一关联
        const audio = box.querySelector(".demo");
        const audioControls = box.querySelector(".demoControls");
        const playPauseBtn = box.querySelector(".playPause");
        const progressBar = box.querySelector(".progressBar");
        const playIcon = playPauseBtn.querySelector("i");

        // 隐藏默认控件，显示自定义控件
        audio.controls = false;
        audioControls.style.display = "block";

        // 播放/暂停按钮逻辑
        playPauseBtn.addEventListener("click", () => {
            if (audio.paused || audio.ended) {
                audio.play();
                playIcon.classList.replace("fa-play", "fa-pause");
            } else {
                audio.pause();
                playIcon.classList.replace("fa-pause", "fa-play");
            }
        });

        // 音频结束事件
        audio.addEventListener("ended", () => {
            console.log("Audio has ended");
            playIcon.classList.replace("fa-pause", "fa-play");
            // 如需自动重复可添加 audio.currentTime = 0; audio.play();
        });

        // 加载元数据后设置进度条最大值
        audio.addEventListener("loadedmetadata", () => {
            progressBar.setAttribute("max", audio.duration);
        });

        // 实时更新进度条
        audio.addEventListener("timeupdate", () => {
            if (!progressBar.getAttribute("max")) {
                progressBar.setAttribute("max", audio.duration);
            }
            progressBar.value = audio.currentTime;
        });
    });
}

关键改进点 #

• 用Array.from()把HTMLCollection转成数组，解决遍历兼容性问题
• 通过box.querySelector()从当前容器内获取元素，确保每个控件只绑定对应的音频，不会出现多个音频互相干扰的情况
• 完善了图标切换逻辑（播放/暂停状态切换）
• 每个事件处理函数都基于当前容器的元素，避免全局变量污染

额外优化建议 #

• 可以给自定义控件加CSS初始隐藏：.demoControls { display: none; }，避免页面加载时控件闪烁
• 进度条可以添加点击跳转功能，提升用户体验：

  progressBar.addEventListener("click", (e) => {
      const rect = progressBar.getBoundingClientRect();
      const pos = (e.clientX - rect.left) / rect.width;
      audio.currentTime = pos * audio.duration;
  });
  

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