5分钟搞定：用JavaScript精准获取音频时长的3种实战方法

在日常的摸鱼点击类工具开发中，音频时长信息是一个高频需求。无论是自动记录播放进度、生成波形图，还是实现定时任务，精确获取音频时长都是基础中的基础。然而，很多新手开发者在实际操作中会遇到兼容性差、精度丢失、无法处理长音频等问题。本文将从实战角度出发，提供3种经过验证的JavaScript方案，涵盖纯前端、跨域场景以及大文件处理，让你不再绕弯路。

很多开发者以为用audio.duration就能搞定一切，但很快会发现几个坑：
1. 跨域限制：加载来自不同域的音频文件时，浏览器会阻止获取duration属性。
2. 流式加载不完整：浏览器需要先加载音频文件的元数据，对于长音频或大文件，初始显示为NaN或infinity。
3. 精度差异：不同浏览器或不同编码格式下，duration的返回精度可能不一样，甚至出现小数点后四位与后端不一致的情况。
4. 兼容性：旧版浏览器或非标准格式（如.wma）可能完全不支持。

这是最直接的方法，适用于同域或已解决跨域的音频文件。关键点是监听loadedmetadata事件，确保元数据加载完毕后再读取duration。

// 获取音频时长的基础函数
function getAudioDurationSimple(audioUrl) {
  return new Promise((resolve, reject) => {
    const audio = new Audio(audioUrl);
    // 监听元数据加载完成事件
    audio.addEventListener('loadedmetadata', () => {
      // 只有在duration可用时才resolve
      if (!isNaN(audio.duration)) {
        resolve(audio.duration);
      } else {
        reject(new Error('音频时长无法解析'));
      }
    });
    // 处理加载失败
    audio.addEventListener('error', (e) => {
      reject(new Error('音频加载失败: ' + e.message));
    });
    // 开始加载
    audio.preload = 'metadata';
    audio.load();
  });
}

// 调用示例
getAudioDurationSimple('http://example.com/audio.mp3')
  .then(duration => console.log(`时长: ${duration}秒`))
  .catch(err => console.error(err));

注意事项：
- 如果音频是跨域资源，服务器必须返回Access-Control-Allow-Origin: *头，否则duration会返回NaN。
- 对于非常大的文件（如1小时以上的播客），loadedmetadata事件可能没有那么快触发，建议设置超时处理。

Web Audio API可以更底层地读取音频数据，通过decodeAudioData方法获取完整的音频buffer，进而得到精确到样本级的时长。这种方法尤其适合处理用户上传的本地文件，或者需要对音频进行二次处理（如剪辑、可视化）的场景。

// 使用Web Audio API获取音频时长
function getAudioDurationWebAudio(audioArrayBuffer) {
  return new Promise((resolve, reject) => {
    // 创建离线上下文
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    // 解码音频数据
    audioContext.decodeAudioData(audioArrayBuffer, (buffer) => {
      // 时长 = 总采样数 / 采样率
      const duration = buffer.duration;
      resolve(duration);
    }, (error) => {
      reject(new Error('解码音频失败: ' + error.message));
    });
  });
}

// 使用示例：从File对象获取
document.querySelector('#audioFileInput').addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = async (event) => {
    try {
      const duration = await getAudioDurationWebAudio(event.target.result);
      console.log(`文件时长: ${duration.toFixed(3)}秒`);
    } catch (err) {
      console.error(err);
    }
  };
  reader.readAsArrayBuffer(file);
});

优势：
- 精度极高，可达毫秒甚至更细（取决于浮点运算）。
- 不依赖HTML Audio元素，避免了跨域和流式加载的问题，适合本地或已下载的音频数据。
- 可以顺便获取音频的采样率、通道数等额外信息。
缺点：
- 需要完整的音频数据（ArrayBuffer），对于远程链接需要先下载整个文件，不适合大文件。
- 解码大文件（如30分钟以上）可能消耗较多内存和CPU。

当文件体积巨大（例如超过100MB）或者前端性能受限时，交给后端处理是最优解。FFmpeg是行业标准，可以处理几乎所有音频格式。以下是一个Node.js示例，使用fluent-ffmpeg库获取时长。

// 先在项目中安装: npm install fluent-ffmpeg
const ffmpeg = require('fluent-ffmpeg');

function getAudioDurationFromBackend(audioPath) {
  return new Promise((resolve, reject) => {
    ffmpeg.ffprobe(audioPath, (err, metadata) => {
      if (err) {
        reject(new Error('FFmpeg分析失败: ' + err.message));
      } else {
        // 时长以秒为单位
        const duration = metadata.format.duration;
        resolve(duration);
      }
    });
  });
}

// 调用
getAudioDurationFromBackend('/path/to/podcast.mp3')
  .then(duration => console.log(`后端算出时长: ${duration}秒`))
  .catch(err => console.error(err));

优势：
- 支持几乎所有音频格式（MP3、WAV、AAC、FLAC、OGG等）。
- 无需前端等待，可放到异步队列处理。
- 可以同时提取更多元数据（如比特率、艺术家、专辑封面等）。
使用注意：
- 需要在服务器上安装FFmpeg程序。
- 如果是远程URL，可以先下载再分析，或者使用ffmpeg.ffprobe(url)（需支持流式分析）。

根据三种方法的特点，这里给出具体场景的选择建议：
场景A：用户点击一个同域的小音频（<10MB） → 使用方法一，原生Audio API一行代码搞定。
场景B：用户拖拽上传任意格式（含本地文件） → 优先使用Web Audio API（方法二），精度高且无跨域问题。
场景C：后端批量处理大量音频文件（如播客目录） → 使用方法三Node.js+FFmpeg，稳定且通用。
场景D：实时播放并显示进度条 → 方法一+方法二结合：监听audio的timeupdate事件，同时用Web Audio API提前解码获取总时长，以获得最佳用户体验。
另外，对于像“摸鱼点击”这类工具，如果需要在用户点击时快速显示时长，建议预加载音频的元数据并缓存结果，避免每次点击都重新请求。

1. duration返回Infinity：通常是因为音频文件是流式直播或实时生成的，没有固定时长；或者加载未完成。可以用audio.seekable.end()替代。
2. 跨域请求时duration为NaN：检查服务器是否返回了正确的Access-Control-Allow-Origin头；如果不行，可在前端设置audio.crossOrigin = "anonymous"。
3. Web Audio解码报错“decoding error”：文件可能损坏或格式不合规（如带DRM保护）。建议后端用FFmpeg转为标准格式后返回。
4. 精度不一致：使用duration.toFixed(2)进行四舍五入，即可满足普通UI显示需求（精确到0.01秒）。

掌握了这三种方法，你就可以在各种项目中灵活获取音频时长，告别“NaN”苦恼。快去试试在你的摸鱼点击小工具里集成吧！