如何实现点击进度条修改音频currentTime的音乐播放器进度器？代码异常求助

你原来的代码存在两个核心问题：

1. 直接使用e.clientX（相对于浏览器窗口的坐标），没有考虑进度条容器自身的位置和宽度，导致计算的比例完全偏离实际点击位置
2. 计算逻辑错误，应该是点击位置占进度条的比例 × 音频总时长，而非你写的混乱公式

正确代码实现 #

progressContainer.addEventListener('click', (e) => {
    // 避免音频未加载完成时duration为NaN的情况
    if (isNaN(audio.duration)) return;

    // 获取进度条容器的视口位置与尺寸
    const containerRect = progressContainer.getBoundingClientRect();
    // 计算点击点在进度条容器内的横向偏移量
    const relativeX = e.clientX - containerRect.left;
    // 计算点击位置占进度条总宽度的比例（范围0~1）
    const progressRatio = relativeX / containerRect.width;
    // 设置音频当前播放位置
    audio.currentTime = progressRatio * audio.duration;
});

关键细节说明 #

• 用getBoundingClientRect()获取容器的真实位置和宽度，确保计算的是点击在容器内的相对位置，不受页面滚动、容器布局影响
• 增加isNaN(audio.duration)判断，防止音频还未加载完成时触发无效计算
• 核心逻辑是通过相对位置比例映射到音频时长，保证点击进度条任意位置都能精准跳转

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