如何用 HTML 和 JavaScript 实现多首歌曲切换播放的音频播放器-js教程-PHP中文网

如何用 HTML 和 JavaScript 实现多首歌曲切换播放的音频播放器

本文详解如何通过点击链接动态切换音频源、自动停止前一首并播放新歌，解决因作用域导致的 `src` 更新失效问题，并提供可直接运行的完整代码方案。

要实现一个支持多首歌曲切换的轻量级 HTML 音频播放器，核心在于正确管理音频元素的 src 属性更新时机与播放控制逻辑。原始代码中，sfile 虽为全局变量，但 togglePlay() 在点击播放按钮时才执行，而此时 setfp() 已执行完毕——若用户未先点歌就直接点播放，sfile 仍为空字符串；更关键的是，togglePlay() 并未在设置新歌曲后立即触发播放，导致“选歌”和“播放”行为脱节。

以下是优化后的完整实现方案（无需 jQuery，兼容现代浏览器）：

JavaScript 测试模式

使用 Jest、Vitest 和 Testing Library 实施全面的测试策略，包括单元测试、集成测试和端到端测试，涵盖模拟、测试夹具和测试驱动开发。在编

下载

✅ 正确结构：分离“选歌”与“播放”，确保状态同步

  <a href="#" onclick="playSong(1)">? Song 1</a><br><a href="#" onclick="playSong(2)">? Song 2</a><br><a href="#" onclick="playSong(3)">? Song 3</a><br><br><div class="audio-player">
    <button id="play-btn">▶ Play</button>
    <div class="audio-wrapper">
      <audio id="player" preload="metadata"></audio>
</div>
  </div>

  <script>
    const player = document.getElementById('player');
    const playBtn = document.getElementById('play-btn');

    // 播放/暂停主逻辑（可复用）
    function togglePlay() {
      if (player.paused) {
        player.play().catch(e => console.warn("Playback failed:", e));
        playBtn.textContent = "⏸ Pause";
      } else {
        player.pause();
        playBtn.textContent = "▶ Play";
      }
    }

    // 点击歌曲链接：设置新源 + 自动播放（含暂停前一首）
    function playSong(songNumber) {
      const newSrc = `./sf/${songNumber}.mp3`;
      // 先暂停当前播放（避免多音轨叠加）
      if (!player.paused) player.pause();
      // 更新 src 并重置播放位置（防止从中间开始）
      player.src = newSrc;
      player.currentTime = 0;
      // 自动尝试播放（现代浏览器需用户手势触发）
      player.play().catch(e => {
        console.error("Auto-play blocked. User must interact first.", e);
        alert("Please click 'Play' to start playback.");
      });
      playBtn.textContent = "⏸ Pause";
    }

    // 绑定播放按钮事件
    playBtn.addEventListener('click', togglePlay);

    // 可选：支持空音频初始化时显示提示
    player.addEventListener('emptied', () => {
      playBtn.textContent = "▶ Play (no song selected)";
    });
  </script>

⚠️ 关键注意事项：

href="#" 替代 href=""：避免页面跳转或刷新，确保 onclick 可靠执行；
移除 IIFE 封装：避免闭包导致变量作用域混乱，所有函数共享同一作用域下的 player 引用；
.play() 必须由用户手势触发：现代浏览器禁止自动播放音频（尤其含声音的），因此 playSong() 中的 player.play() 可能被拦截——首次播放务必由用户点击按钮或链接触发（本方案中链接即用户手势）；
preload="metadata"：提升加载效率，仅预加载元数据而非全部音频；
player.currentTime = 0：确保切换歌曲时从头播放，避免残留进度；
错误处理：.play() 返回 Promise，需 .catch() 捕获自动播放策略拒绝（如 Safari/Chrome 移动端）。