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

Question

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

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

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

• 拍照或录像
• 照片库

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

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

Answer 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 文件。