Record audio, compress / convert and upload

ionic-v1
1

Hi guys.

I hope the title is as simple as humanly possible.

I’m new to Ionic, starting playing around on Saturday and have been loving it so far. I’ve been able to get started and knock together a demo application and am making good progress.

However, I have an issue I was hoping someone could help with.

I want to record a short audio clip from the users mobile device, compress / convert it (as I see the Cordova library produces a wav file in iOS and a amr file in Android) to MP3 / M4A and then upload it.

The recording and upload parts I am fine with, but the bit in the middle is tricky. Uploading a wav file from a mobile device doesn’t make any sense, is there a way to create a MP3 / M4A file from the wav / amr file?

Thanks guys, I appreciate anyone taking the time to give me some guidance!
Ed

2 Likes
2

You should check our these cordova plugins.

http://plugins.cordova.io/#/package/org.apache.cordova.media
http://plugins.cordova.io/#/package/org.apache.cordova.media-capture

3

Hi mharington. Thanks for the response.

I’ve checked both of those plugins out. However there is nothing I can see that answers the question of converting a wav / amr file to a MP3 / M4A file.

Thanks again.
Ed

4

Not sure how well this works but it could help

5

@edwrede_ZA Did you end up finding a concrete solution? As part of an application I’m creating, I wish to do exactly the same thing as you (record + compress).

Any help would be appreciated!

Cheers,

Tom

6

Hi @szpytfire

I did come to a concrete solution, I’ll send you a PM and see if I can help :smile:
Ed

7

I’ve also been trying to solve this problem, any help would be amazing!

8

I’ve also been trying to solve this problem, any help would be amazing!

9

Anyone has achieved this goal?

10

Would you please share your audio encode solution with me too.
Thanks,
Steven Benjamin
steven@stevenbenjamin.com

11

Hi everyone.

Sorry to @sBenjamin , @kurtommy , @ckken and @mikes I was on holiday in a remote part of the country with no internet so I couldn’t reply sooner.

I’ll try my best to help, but please be aware that my usage was extremely specific to my requirements and I am by no means saying this is a GOOD solution, just that it worked for me, with that disclaimer out the way :wink: …

Another Ionic member @EddyVerbruggen (thank you so much again for your help Eddy, a truly patient, fantastic gentleman) and I worked on a plugin which can be found here: https://github.com/CirrusTech/cordova-audiorecorder-plugin

This helps record the audio in a format I deemed acceptable for Android. If you view the code you’ll see the exact settings used, this still created fairly large audio files, but I wanted them pretty clear, you can mess with the settings to decrease file size and find your own middle ground.

So for Android I did the following:

window.plugins.audiorecorder.record(onSuccess, onFailure);

While on iOS I did the following:

navigator.device.capture.captureAudio(onSuccess, onFail, {limit: 1, duration: 7});

I used a PHP script to upload the files to my server. Then in the PHP I did the following:

uploadOptions.mimeType = "audio/mp4";
uploadOptions.fileName = DTStamp + ".m4a";

uploadOptions is just an array passed to my PHP script (I can expand on this if anyone needs). DTStamp was just a date time stamp which is what I used to name the files and then saved them with an m4a extension. I am fully aware that the files recorded on iOS devices are not ACTUALLY m4a files, however they play as “m4a” files.

This resulted in audio files that would play on both Android and iOS devices, which is the issue I was having. Initially audio files recorded on Apple devices wouldn’t play on Android devices and vice versa, but with the method I’ve described anything played anywhere which was my requirement.

Let me know if you guys need anything else or if there’s anything else I can expand on :smile:

Good luck guys!

2 Likes
12

This plugin is a lifesaver !! i had to do a slight modification to the success method to make the plugin compatible with the latest version of cordova. It is successfully encoding the file which is great, however, for some reason the success callback in JS is never fired. Any ideas or suggestions on what may be wrong? here is the method, any advice at all greatly appreciated:

-(void) doSuccessCallback:(NSString*)path {
NSLog(@"doing success callback");

CDVPluginResult* pluginResult = nil;

if (pluginResult == nil) {
    pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:path];
}

//javaScript = [pluginResult toSuccessCallbackString:self.callbackId];
//[self writeJavascript:javaScript];
[self.commandDelegate sendPluginResult:pluginResult callbackId:self.callbackId];

}

14

Few reasons those make I thought that media-capture plugin not so well:

  • has to show native recording UI
  • has to start and stop recording manually
  • has to submit recording manually

Any solution that I can use the recorder like API but UI? I wish it can be fully controlled by the JS.
If there are no plugins for this job. Is it possible create one with the Cordova?

15

Couldn’t find others.
Just created my own plugin https://github.com/emj365/cordova-plugin-audio-recorder-api

16

@emj365, does your plugin convert the audio to mp3 format? And does it work on ios and android?

17

Looks like it does m4a from the readme. This plus https://github.com/SidneyS/cordova-plugin-nativeaudio looks like a perfect combo for API-based record/playback.

1 Like
18

for some reason, the directory in which recorded files are saved doesnt show any files (/data/data//files/.m4a). how do i access these files?
Thanks!

19

Hi there.

Does your path have the double slash before files on it in the app?

20

Thank you check plugin that I made, I decided to let server convert the audio file format because it hasn’t a good solution can do it in both iOS and Android.

Any question in GitHub issues is welcome.

1 Like
21

Hi emj365, I have used ur plugin to record sound, but the recorded files is showing error when opened with any media player(VLC,etc…) The encoding Format seems to be fishy. Kindly help me on this. Thanks