开发 `LyricTypewriter` 音乐播放组件

.progress-bar-container {
  position: relative;
  width: 100%;
  height: 6px; /* 😱 高度太小了！ */
  overflow: hidden; /* 😱 这个是罪魁祸首！ */
  cursor: pointer;
}

.progress-handle {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 12px;
  height: 12px; /* 控制点12px，但容器只有6px */
  /* ... */
}

<!-- 原来的结构 -->
<div class="progress-container">
  <div class="progress-bar-container"><!-- 进度条 --></div>
  <div class="time-info">
    <span class="current-time">00:00</span>
    <span class="duration">00:00</span>
  </div>
</div>

<!-- ✅ 新的结构 -->
<div class="progress-container">
  <div class="progress-info">
    <span class="time-display">00:00</span>
    <div class="progress-bar-container"><!-- 进度条 --></div>
    <span class="time-display">00:00</span>
  </div>
</div>

async loadLyrics() {
  try {
    const response = await fetch(this.lrcFile);
    const lrcText = await response.text();
    this.parseLrc(lrcText);
    
    // ✅ 歌词加载完成后立即显示初始内容
    this.displayInitialLyrics();
  } catch (error) {
    console.error("加载歌词失败:", error);
    // ✅ 失败时也要有友好提示
    this.currentLyricEl.textContent = "歌词加载失败，请检查文件路径";
    this.nextLyricEl.textContent = "点击播放按钮开始音乐 🎵";
  }
}

displayInitialLyrics() {
  if (this.lyrics.length > 0) {
    // ✅ 显示第一句歌词
    this.currentLyricEl.textContent = this.lyrics[0].text;
    this.currentLyricEl.classList.remove("typing-animation", "finished");
    
    // ✅ 显示下一句预览
    if (this.lyrics.length > 1) {
      this.nextLyricEl.textContent = `♪ ${this.lyrics[1].text}`;
    } else {
      this.nextLyricEl.textContent = "准备开始音乐之旅 🎶";
    }
  } else {
    // ✅ 无歌词时的友好提示
    this.currentLyricEl.textContent = "暂无歌词，享受纯音乐吧 🎵";
    this.nextLyricEl.textContent = "点击播放按钮开始音乐 🎶";
  }
}

playAudio() {
  console.log("=== playAudio 被调用 ===");
  console.log("调用堆栈:", new Error().stack);
  console.log("audio元素:", this.audio);
  console.log("audioUrl:", this.audioUrl);
  // ... 播放逻辑
}

bindEvents() {
  console.log("开始绑定事件...");
  
  if (this.playBtn) {
    console.log("绑定播放按钮事件，按钮元素:", this.playBtn);
    console.log("按钮ID:", this.playBtn.id);
    
    this.playBtn.addEventListener("click", (event) => {
      console.log("=== 播放按钮被点击 ===");
      console.log("点击事件:", event);
      console.log("事件目标:", event.target);
      this.playAudio();
    });
    
    console.log("播放按钮事件已绑定完成");
  }
}

playAudio() {
  // ✅ 检查当前播放状态
  if (this.isPlaying && this.audio) {
    this.pauseAudio();
    return;
  }
  
  if (this.audio && this.audioUrl) {
    // ✅ 确保音频完全停止
    if (!this.audio.paused) {
      this.audio.pause();
      this.audio.currentTime = 0;
    }
    
    // ✅ 设置音频源
    if (!this.audio.src || this.audio.src !== this.audioUrl) {
      this.audio.src = this.audioUrl;
    }
    
    // ✅ 播放音频
    this.audio
      .play()
      .then(() => {
        // 成功处理
        if (this.playBtn && this.pauseBtn) {
          this.playBtn.style.display = "none";
          this.pauseBtn.style.display = "inline-block";
        }
        this.startLyrics();
      })
      .catch((e) => {
        console.error("播放失败:", e);
        // ✅ 更好的错误处理
        if (e.name === 'AbortError') {
          console.warn("播放被中断，可能存在并发播放请求");
        }
      });
  }
}

// ✅ 新的初始化方式
function initializeComponent() {
  // 检查是否已初始化，避免重复
  const existingContainer = document.getElementById(uniqueId);
  if (existingContainer && existingContainer.dataset.initialized) {
    console.log("组件已初始化，跳过重复初始化");
    return;
  }
  
  console.log("开始初始化 LyricTypewriter 组件");
  const instance = new LyricTypewriter(uniqueId, lrcFile, audioUrl, speed, autoPlay);
  
  // 标记已初始化
  if (existingContainer) {
    existingContainer.dataset.initialized = "true";
  }
}

// 多种初始化策略
if (document.readyState === 'loading') {
  // 文档还在加载中
  document.addEventListener("DOMContentLoaded", initializeComponent);
} else {
  // 文档已加载完成（适用于客户端路由）
  initializeComponent();
}

// 延迟备用初始化
setTimeout(() => {
  const container = document.getElementById(uniqueId);
  if (container && !container.dataset.initialized) {
    console.log("延迟初始化组件");
    initializeComponent();
  }
}, 100);

class LyricTypewriter {
  constructor(containerId, lrcFile, audioUrl, speed, autoPlay) {
    // ...
    this.initialized = false; // ✅ 初始化标志
    this.initElements();
  }

  initElements() {
    // ✅ 防止重复初始化
    if (this.initialized) {
      return;
    }
    
    // ... 初始化逻辑
    
    // ✅ 标记为已初始化
    this.initialized = true;
  }

  bindEvents() {
    // ✅ 防止重复绑定事件
    if (this.eventsbound) {
      console.log("事件已绑定，跳过重复绑定");
      return;
    }
    
    // ... 事件绑定逻辑
    
    // ✅ 标记事件已绑定
    this.eventsbound = true;
  }
}

syncLyrics() {
  // ... 查找当前歌词逻辑
  if (i !== this.currentIndex) {
    this.currentIndex = i;
    this.displayLyric(this.lyrics[i].text); // ❌ 总是使用打字机动画
    this.displayNextLyric(i + 1);
  }
}

displayLyric(text) {
  this.currentLyricEl.textContent = "";
  this.currentLyricEl.classList.remove("typing-animation", "finished");
  
  setTimeout(() => {
    this.typeText(this.currentLyricEl, text, this.speed); // ❌ 打字机动画
  }, 100);
}

bindEvents() {
  // ...
  if (this.progressBarContainer) {
    // ✅ 鼠标拖拽支持
    this.progressBarContainer.addEventListener("mousedown", (e) => {
      this.isDragging = true;
      this.handleProgressInteraction(e);
      
      const handleMouseMove = (e) => {
        if (this.isDragging) {
          this.handleProgressInteraction(e);
        }
      };
      
      const handleMouseUp = () => {
        this.isDragging = false; // ✅ 结束拖拽
        document.removeEventListener("mousemove", handleMouseMove);
        document.removeEventListener("mouseup", handleMouseUp);
      };
      
      document.addEventListener("mousemove", handleMouseMove);
      document.addEventListener("mouseup", handleMouseUp);
    });

    // ✅ 触摸拖拽支持
    this.progressBarContainer.addEventListener("touchstart", (e) => {
      e.preventDefault();
      this.isDragging = true;
      this.handleProgressInteraction(e.touches[0]);
    });

    this.progressBarContainer.addEventListener("touchend", () => {
      this.isDragging = false; // ✅ 结束拖拽
    });
  }
}