React中使用audio元素如何在播放前显示音频时长？

你的<audio controls preload='metadata' />写法本身没问题，但preload='metadata'的实际效果可能受浏览器机制、跨域限制或音频文件本身影响，导致播放前不显示时长。可以试试下面这些办法：

• 手动监听元数据加载事件：用JavaScript主动捕获音频元数据加载完成的时机，拿到时长后可以自己展示（或者确认原生控件是否能触发显示）：

  const audioEl = document.querySelector('audio');
  audioEl.addEventListener('loadedmetadata', () => {
    // 这里可以拿到准确的时长
    console.log('音频时长：', audioEl.duration);
    // 如果原生控件还是不显示，你可以把这个时长插入到页面的对应位置
  });
  

  这个事件触发时，浏览器已经获取到了音频的元数据，包括时长，不管原生控件有没有显示，你都能拿到这个值。

• 检查跨域配置：如果音频文件在其他域名下，服务器必须配置CORS响应头（比如Access-Control-Allow-Origin），允许你的页面所在域名访问。否则浏览器会出于安全限制，阻止获取元数据，只能等播放后才能拿到。

• 尝试切换preload值：把preload='metadata'换成preload='auto'，这个值会让浏览器提前加载部分音频内容（包括元数据），虽然会增加带宽消耗，但能提升元数据加载的成功率。不过要注意，这个属性的行为不同浏览器可能有差异。

• 检查音频文件本身：有些音频文件可能没有正确嵌入时长元数据，这种情况下即使浏览器想加载也拿不到。可以用音频编辑工具重新导出文件，确保元数据完整。

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