检测浏览器是不是本机支持将音频传递给输入标签

Posted 2023-02-22

【中文标题】检测浏览器是不是本机支持将音频传递给输入标签

【英文标题】：Detect if a browser natively supports passing audio to an input tag检测浏览器是否本机支持将音频传递给输入标签

【发布时间】：2021-06-30 21:13:10

【问题描述】：

我有一个网页应该只接受音频文件，更准确地说只接受 mp3 文件。所以我有一个输入：

<input type="file" accept=".mp3" />

问题是，ios 10.3 上的 Safari 忽略了 accept 属性。即使没有，在 iOS 10 上接受音频仍然没有意义，因为此 iOS 版本不支持文件。但更令人困惑的是，Safari 会显示一个带有这些选项的模式：

拍照或录像 图片库

由于我的网站只接受音频，因此这些选项没有多大意义。所以我更愿意在这个 Safari 版本上显示错误消息。

问题是：有没有办法（仅通过 html 或 JS）检测浏览器是否本机支持将音频作为文件传递给 <input /> 标签？

【问题讨论】：

可以获取用户的浏览器和操作系统。创建一个[] 的浏览器|| 您不想支持的操作系统，进行相应的比较和处理。

您应该在接受中使用“audio/mpeg”而不是“.mp3”来接受 mp3 文件

【参考方案1】：

所以，经过数小时的研究和上网，我得出了这个结论：

caniuse states 几乎没有移动浏览器支持accept 属性。因此，您不能阻止移动浏览器选择与所需不同的文件类型 在 SO 上有类似的问题，答案相同：编写您自己的输入处理程序，检查文件扩展名，如果不是您想要的，则显示错误

我想，这种方法确实有意义。但是，并非所有 mp3 文件的文件名中实际上都有 .mp3 后缀（这可能是一个奇怪的情况，但像 android 这样的操作系统允许您这样做）。所以我选择通过 Web Audio API 来测试文件：

// inside the input handler
const fr = new FileReader();

fr.readAsArrayBuffer(file);
fr.addEventListener('loadend', () => 
  audioCtx.current = new AudioContext();

  audioCtx.current.decodeAudioData(
    fr.result,
    successCallback,
    (err) => 
      alert('Incorrect file format. Please, pass an audio file');
    ,
  );

我的页面做了一些可视化，所以无论如何它都会解码音频。但是，使用这种方法，我只能测试该文件是正确的音频，而不是完全是 mp3 文件。