nativescript-audio icon indicating copy to clipboard operation
nativescript-audio copied to clipboard

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

Open AbiJaerltrics opened this issue 7 years ago • 19 comments

AbiJaerltrics avatar Nov 07 '18 16:11 AbiJaerltrics

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

davecoffin avatar Nov 08 '18 14:11 davecoffin

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

AbiJaerltrics avatar Nov 08 '18 14:11 AbiJaerltrics

@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 :)

bradmartin avatar Nov 08 '18 17:11 bradmartin

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

davecoffin avatar Nov 08 '18 17:11 davecoffin

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

AbiJaerltrics avatar Nov 08 '18 18:11 AbiJaerltrics

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

AbiJaerltrics avatar Nov 08 '18 18:11 AbiJaerltrics

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

video

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

bradmartin avatar Nov 08 '18 18:11 bradmartin

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

davecoffin avatar Nov 08 '18 18:11 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 avatar Nov 08 '18 18:11 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

davecoffin avatar Nov 08 '18 18:11 davecoffin

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

suckitdave

bradmartin avatar Nov 08 '18 18:11 bradmartin

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 image

AbiJaerltrics avatar Nov 08 '18 20:11 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 avatar Nov 08 '18 20:11 AbiJaerltrics

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

AbiJaerltrics avatar Nov 08 '18 21:11 AbiJaerltrics

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

AbiJaerltrics avatar Nov 08 '18 21:11 AbiJaerltrics

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?

bradmartin avatar Nov 08 '18 22:11 bradmartin

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 avatar Nov 09 '18 14:11 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

AbiJaerltrics avatar Nov 09 '18 15:11 AbiJaerltrics

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

sujanvaland avatar Jan 09 '20 12:01 sujanvaland