Detect if a browser natively supports passing audio to an input tag

Question

I have a webpage that should accept only audio files, more precisely only mp3 files. So I have an input:

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

The problem is, Safari on iOS 10.3 ignores the accept attribute. And even if didn't, there still would be no sense to accept audio on iOS 10, because Files are not supported on this iOS version. But what is more confusing, is that Safari shows a modal with these options:

Take Photo or Video
Photo library

Since my website only accepts audio, these options don't make much sense. So I'd prefer to show an error message on this Safari version.

The question is: is there a way (via HTML only or JS) to detect if a browser natively supports passing audio as a file to an <input /> tag?

You can get the user's browser and OS. Create an `[]` of browsers `||` OS you don't want to support, compare and handle accordingly. — Tom Bombadil, Apr 04 '21 at 20:57
you should use "audio/mpeg" instead of ".mp3" inside your accept to accept mp3 files — Rachel Gallen, Apr 04 '21 at 21:18

score 0 · Answer 1 · answered Apr 04 '21 at 22:17

So, after hours of researching and surfing the Internet, I came to this:

caniuse states that almost no mobile browser supports the accept attribute. Therefore, you cannot prevent mobile browsers from selecting file types different from desirable
there are similar questions on SO where the answer is the same: write your own input handler, check the file extension, and show an error if it's not the one you'd like

I guess, this approach does make sense. However, not all mp3 files actually have an .mp3 suffix in its filename (which probably is a bizzare case, but OSes like Android let you do that). So I chose to test the file via 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');
    },
  );

My page does some visualization so it decodes an audio anyway. However, with this approach I can only test that the file is a correct audio, but not that it's an exactly mp3 file.

Detect if a browser natively supports passing audio to an input tag

1 Answers1