调整音频进度条range输入框数值的JS功能不生效问题求助

核心错误点 #

• seek()函数中错误读取音频元素mysong的value属性，实际应该读取滑块输入框的数值
• range_slider()函数中使用的slider变量未定义，没有绑定到页面的滑块元素
• 遗漏了range_slider()函数的定时调用逻辑，无法自动同步音频播放进度到滑块
• 仅绑定onchange事件仅在滑块拖动结束后触发，拖动过程中不会实时更新进度

修正后的代码 #

HTML 滑块部分 #

<input type="range" min="0" max="100" value="0" id="duration_slider" onchange="seek()" oninput="seek()">

JavaScript 逻辑部分 #

// 提前获取音频元素和滑块元素，避免重复查询
var mysong = document.getElementById('mysong');
var slider = document.getElementById('duration_slider');

// 修复后的进度跳转函数
function seek(){
    const slider_position = mysong.duration * (slider.value / 100);
    mysong.currentTime = slider_position;
}

// 修复后的滑块同步函数
function range_slider(){
    let position = 0;
    if(!isNaN(mysong.duration)){
        position = mysong.currentTime * (100 / mysong.duration);
        slider.value = position;
    }      
}

// 新增定时调用，每100毫秒同步一次播放进度到滑块
setInterval(range_slider, 100);

可选检查项 #

如果修复后依然无法生效，可逐一确认：

• HTML中音频元素id确实为mysong，滑块元素id确实为duration_slider，无拼写错误
• JS代码加载位置在对应HTML元素之后，或包裹在DOM加载完成的回调中，避免获取元素返回null
• 音频资源无跨域限制，可正常读取时长和进度属性

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