The audio file from recording does not play on HTML5 <audio> tag

[davecoffin]

You need to share more information for us to help. Share the audio file, share code etc.

[AbiJaerltrics]

After recording, the audio file is sent and stored to a web server (PHP). Everything works fine when I play the audio file from mobile using its URL. But when I play it on browser or even using

[bradmartin]

@AbiJaerltrics can you upload the mp3 here, that site has the mp3 inside a video tag and I can't get Chrome to let me download it. Maybe there is a way I'm unaware of though :)

[davecoffin]

download it here: https://cl.ly/8c8ab6328bf4

[AbiJaerltrics]

@bradmartin it is not placed inside a video tag. It's a direct link to that file.

[AbiJaerltrics]

Is this has something to do with mime type? is it possible to set mime type before recording?

[bradmartin]

That's weird, Chrome opens it up and dumps it inside a video tag 😄 - not my area so 🤷‍♂️ .

At any rate, I'll check it out later and see if I can find any info to help.

[davecoffin]

you just have to right click on it to save it nerd.

[davecoffin]

that a clue though...the mp3 is loading in a video tag. that means the html5 media player thinks its a video. which is probably why its not playing in the audio tag. probably mime type 🧐

[davecoffin]

also, i just tried to open the file in quicktime, and it immediately starting converting. it shouldnt do that with properly formatted mp3s

https://cl.ly/4d03c72fee0c

[bradmartin]

suck it dave. I tried right clicking but since it's in a video tag you don't get a save as option.

[AbiJaerltrics]

It is really a mime type problem. The default mime type generated from recording is video/3gpp that's why it opens inside a video tag. I used CheckFileType.com

[AbiJaerltrics]

video/3gpp is not supported on any browsers and on HTML5. I really need to convert the audio file to an accepted file type.

[AbiJaerltrics]

I found encoder?: any. Is it possible to set mime type that I want to use there? @davecoffin @bradmartin

[AbiJaerltrics]

or the bitrate?: any or format?: any maybe? There's a comment Encoding there.

[bradmartin]

what platform are you recording on? android or ios? is this happening on both? Also the device inf would be good to know. Also, do you know if your backend isnis modifying the file when it saves it to disk in any way?

[AbiJaerltrics]

Both. Im pretty sure it doesn't modify the file when saving. Im using these recorder options `var recorderOptions = {

   filename: audioFolder.path + '/recording.mp3',
   infoCallback: function () {
      console.log('infoCallback');
    },
   errorCallback: function () {
      console.log('errorCallback');
      console.log('Error recording.');
    }
 };

`

[AbiJaerltrics]

Finally got it working on android. I add this one if (platformModule.isAndroid) { // m4a // static constants are not available, using raw values here // androidFormat = android.media.MediaRecorder.OutputFormat.AAC_ADTS; androidFormat = 6; // androidEncoder = android.media.MediaRecorder.AudioEncoder.AAC; androidEncoder = 3; } and on recorderOptions format: androidFormat, encoder: androidEncoder

[sujanvaland]

I am facing the same issue while using @react-native-community/audio-toolkit my recorder looks like this.recorder = new Recorder(filename, { bitrate: 128000,//256000, channels: 2, sampleRate: 44100, format: 'FORMAT_AAC_ADTS', encoder: 'ENCODER_AAC', quality: 'max' });

can you check if i am passing the correct format and encoder, i tried 6 and 3 for format and encoder but it is asking for string, so i tried above. can you guide please