修改audio.currentTime后其值变为0的技术问题求助

核心原因 #

修改audio.currentTime后值变回0，主要由以下几个问题导致：

1. 音频无有效资源/未加载完成
   你的HTML中<source>的src是空字符串，音频元素无法获取有效媒体资源，此时audio.duration会返回NaN。用NaN参与计算后，赋值给currentTime的结果也是NaN，音频元素会自动将其重置为0。
   即便后续动态设置了src，如果没等音频加载到能获取duration的状态就操作，同样会出现这个问题。

2. 进度条点击的坐标计算不准确
   直接使用e.offsetX可能和进度条实际可点击区域不匹配，导致计算出超出音频时长的数值，currentTime被设置为超出范围的值时，会被重置为0。

解决方案 #

1. 确保音频资源有效并完成加载 #

先给<source>设置有效音频地址，再通过loadedmetadata事件等待音频元数据加载完成：

<audio id="audio" style="display: none">
   <source src="你的有效音频地址.mp3" id="audioSource" type="audio/mpeg">
</audio>

<div class="time-control" id="progressBar">
   <input id="progress" type="range" style="height: 5px; border-radius: 5px;">
</div>

对应的JavaScript代码：

let audio = document.getElementById('audio');
let progress = document.getElementById('progress');

// 等待音频元数据加载完成，确保能获取有效duration
audio.addEventListener('loadedmetadata', function() {
    progress.max = audio.duration; // 初始化进度条最大值为音频时长
});

progress.addEventListener('click', function(e){
    if (isNaN(audio.duration)) return; // 时长无效时不执行
    
    // 计算点击位置占进度条宽度的比例
    const clickRatio = e.offsetX / this.offsetWidth;
    const targetTime = clickRatio * audio.duration;
    // 限制时间在0到duration范围内，避免超出值被重置
    audio.currentTime = Math.max(0, Math.min(targetTime, audio.duration));
});

2. 修复动态设置音频源的场景 #

如果需要后续通过JS修改音频地址，记得调用load()方法重新加载资源：

// 动态更新音频源
document.getElementById('audioSource').src = '新的音频地址.mp3';
audio.load(); // 触发资源重新加载

3. 优化进度条点击坐标计算 #

如果进度条外层有包裹容器，建议用getBoundingClientRect()获取更准确的点击位置：

document.getElementById('progressBar').addEventListener('click', function(e){
    if (isNaN(audio.duration)) return;
    
    const rect = progress.getBoundingClientRect();
    // 计算点击位置相对于进度条的比例
    const clickRatio = (e.clientX - rect.left) / rect.width;
    const targetTime = clickRatio * audio.duration;
    audio.currentTime = Math.max(0, Math.min(targetTime, audio.duration));
});

验证步骤 #

• 打开浏览器控制台，检查audio.duration是否为有效数字（非NaN）
• 确认音频地址可正常访问，无跨域或404错误
• 手动测试audio.currentTime = 10，确认该值能正常保留而非重置为0

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