获取MP3时长时偶现无效值，需转为hh:mm:ss格式的问题求助

嘿，我懂你现在的困扰——获取音频时长时好时坏，还得把它转成标准的hh:mm:ss格式对吧？咱们一步步来搞定这个问题。

为什么时长会出现无效值？ #

核心原因是 <audio> 元素的 duration 属性只有在音频元数据（包括时长、比特率这类关键信息）完全加载后才能返回正确值。如果你的代码执行得太早，音频还没来得及加载元数据，duration 就会返回 NaN 或者其他无效值，这就是时长时好时坏的根源。

解决方案：等待元数据加载+完善格式化函数 #

1. 补全并优化你的秒转时间函数

这个函数需要能处理无效的时长值（比如NaN），同时确保输出严格的hh:mm:ss格式：

// 将秒数转换为hh:mm:ss格式的工具函数
function secondstotime(secs) {
    // 处理无效输入：NaN、负数、非数字值
    if (isNaN(secs) || secs < 0) {
        return "00:00:00";
    }

    // 计算时、分、秒
    const hours = Math.floor(secs / 3600);
    const minutes = Math.floor((secs % 3600) / 60);
    const seconds = Math.floor(secs % 60);

    // 补零处理，确保每个部分都是两位数字
    const formattedHours = hours.toString().padStart(2, '0');
    const formattedMinutes = minutes.toString().padStart(2, '0');
    const formattedSeconds = seconds.toString().padStart(2, '0');

    return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
}

2. 监听音频元数据加载事件再获取时长

别再页面加载时直接调用 duration 了，而是等待 loadedmetadata 事件触发，这时候元数据已经准备就绪：

const audio17 = document.getElementById("audio-17");
const durationDisplay17 = document.getElementById("duration-17");

// 监听元数据加载完成事件
audio17.addEventListener('loadedmetadata', function() {
    const audioDuration = audio17.duration;
    const formattedTime = secondstotime(audioDuration);
    durationDisplay17.innerHTML = formattedTime;
});

// 额外处理：如果音频已经从缓存加载完成，手动触发事件
if (audio17.readyState >= 2) { // HAVE_METADATA状态，说明元数据已加载
    audio17.dispatchEvent(new Event('loadedmetadata'));
}

额外小贴士 #

• 如果你的音频是通过JavaScript动态创建的，记得先设置 audio.src，再绑定 loadedmetadata 事件。
• 如果遇到跨域音频无法获取时长的情况，需要确保音频所在服务器配置了正确的CORS响应头，允许你的网站访问资源。

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