Recording and saving audio in Cordova applications

This post is more than 2 years old.

Ah, looking at that title there you probably think, "Surely this is a simple matter in Cordova and surely this is Raymond, once again, blogging something is incredibly obvious and simple just to drive people to his Amazon Wishlist." Yep, that's what I thought too. This weekend I began work on a simple little Cordova app for my son. I thought it would be a great blog post too. But while working on it, I ran into an issue with audio recordings that drove me bat-shit crazy for a few hours, so I thought I'd better share so others don't have to bang their heads against the wall too.

Because this problem turned into a royal cluster-you know what, I've decided to blog it about it in detail here and talk about the app itself later this week. For now, consider this use case:

"You want to allow the user to make an audio recording. Later, the user can play that recording."

Simple, right? So I began working on a form that would let the user make the recording as well as name it. I wanted them to be able to do the recording as well as play it back to ensure they liked it.

iOS Simulator Screen Shot Jul 27, 2015, 1.38.09 PM

Clicking Record fires off a call to the Media Capture plugin:

var captureError = function(e) {
	console.log('captureError' ,e);
}

var captureSuccess = function(e) {
	console.log('captureSuccess');console.dir(e);
	$scope.sound.file = e[0].localURL;
	$scope.sound.filePath = e[0].fullPath;
}

$scope.record = function() {
	navigator.device.capture.captureAudio(
		captureSuccess,captureError,{duration:10});
}

This is boiler-plate Media Capture usage here. I'm storing both the URL and file path in $scope so I can save it later. The Play feature is also pretty trivial:

$scope.play = function() {
	if(!$scope.sound.file) {
		navigator.notification.alert("Record a sound first.", null, "Error");
		return;
	}
	var media = new Media($scope.sound.file, function(e) {
		media.release();
	}, function(err) {
		console.log("media err", err);
	});
	media.play();
}

This worked fine in Android and iOS. But I noticed something weird. When I looked at the Media Capture object in captureSuccess, I saw this in Android:

shot1

See the portion I called out there? Persistent. Cool. That gives me the warm fuzzies. However, in iOS, I saw this:

shot2

As you can see, it is being stored in a temporary location, which is not good. Unfortunately, there is nothing in the Media Capture plugin that you can change to modify this behavior. Therefore - the answer was clear.

The File System!

onesimply

So in theory, this should be easy. First, we pick a persistent location that covers both Android and iOS. The File plugin provides such an alias: cordova.file.dataDirectory

We have a folder, right? So literally all we need to do is copy a file from one location to another. Copy. A damn. File.

But we've got an issue. First, we have to give the file a unique name. To handle that, I just used time and the existing extension.

var extension = $scope.sound.file.split(".").pop();
var filepart = Date.now();
var filename = filepart + "." + extension;
console.log("new filename is "+filename);

I then spent about an hour trying to get the copy command to work. I began by adding numerous console.log messages with the F word in it. If you don't know what that word is, ask your teenagers. I thought that with a file path, I could just do this:

var file = new FileEntry(some damn path);

But nah, that would be too easy. You need to use window.resolveLocalFileSYstemURL first. And since the File copy command requires a path, you have to do this twice. Here's the code I ended up with. I removed a few console.log messages that may offend some readers. If you're curious, I went way beyond just saying the F-word.

window.resolveLocalFileSystemURL(loc, function(d) {
	window.resolveLocalFileSystemURL($scope.sound.file, function(fe) {
		fe.copyTo(d, filename, function(e) {
			console.log('success inc opy');
			console.dir(e);
			$scope.sound.file = e.nativeURL;
			$scope.sound.path = e.fullPath;

			Sounds.save($scope.sound).then(function() {
				$ionicHistory.nextViewOptions({
				    disableBack: true
				});
				$state.go("home");
			});
			
		}, function(e) {
			console.log('error in coipy');console.dir(e);
		});					
	}, function(e) {
		console.log("error in inner bullcrap");
		console.dir(e);
	});

All in all, it isn't that bad. A few nested callbacks, and nearly half my code there is related to my app, not the actual issue, it just took me a while to get there.

Luckily, everything worked perfectly.

yeah-right

So at this point, I've saved the location of my audio file so I can use it in the Media api, but the new location doesn't work in the Media plugin anymore. Why? I don't freaking know. I blogged last year about how when you use the Media plugin and a relative path, you have to do something funky on Android, basically prefix your relative URL. In my case, I'm using a file:// url and I just assumed it would work.

And here is where things got awesome - it worked perfectly in Android but not iOS. Because - reasons. I brought this up on the Cordova Slack channel and @purplecabbage mentioned that a relative path may work. In my dev tools, I tried to manually create a Media object via the console. I discovered that - given the file name - I could access the file with the Media plugin by using this as the root: "../Library/NoCloud/".

So now my play code looks like so:

var playSound = function(x) {
	getSounds().then(function(sounds) {
		var sound = sounds[x];

		/*
		Ok, so on Android, we just work.
		On iOS, we need to rewrite to ../Library/NoCloud/FILE
		*/
		var mediaUrl = sound.file;
		if(device.platform.indexOf("iOS") >= 0) {
			mediaUrl = "../Library/NoCloud/" + mediaUrl.split("/").pop();
		}
		var media = new Media(mediaUrl, function(e) {
			media.release();
		}, function(err) {
			console.log("media err", err);
		});
		media.play();			
	});		
}

So... yeah. That's it. My app now works. I can record and test audio, and I can persist it to a permanent file system. As I said, I'll share the real app later this week.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Phillip Senn posted on 7/28/2015 at 8:41 PM

I had some success with this:

https://github.com/mattdiam...

as a pure web application in Chrome.
Although it makes a .wav file available as a link, I'm not sure of it's persistence - you can't just copy/paste the link and expect an incognito window to open it.

I didn't quite understand the file system part of it.

Comment 2 by Gaurav Chandra posted on 7/30/2015 at 5:15 AM

Oh I faced the same issue with a client's app I was building. Man, these non-interoperability between plugins and inconsistencies between the cordova platforms is giving a bad name to hybrid apps. I wish we can somehow standardise the plugins behaviour.

Comment 3 by Simon Grimm posted on 7/30/2015 at 5:42 AM

Man the cordova filesystem is a like mystical place for rituals.. I had tutorials about taking images, storing, presenting and maybe sending them out (http://devdactic.com/comple.... You know what? I finally gave in.

If you want to develop apps you don't want to fight with resolveFileUrls, permissions and magic wrong paths due to inconsistency between iOS and Android. I could really go bonkers on this. Completely agree with you and I can understand every F word in your logging rage :D

Comment 4 by Scott Bolinger posted on 7/31/2015 at 7:07 PM

Thanks for posting this, I'm sure it will save me some headaches in the near future :)

Comment 5 by Tarabass posted on 8/4/2015 at 7:48 AM

Been there, done that. It's a hell to work with. Same for pictures/galleries or saving canvas to images for upload. And who is gonna solve this? Or..

Comment 6 by fabio pereira posted on 9/26/2015 at 1:52 PM

I have an error that say 'Error: navigator.device is undefined' in
firefox and say 'TypeError: Cannot read property 'capture' of undefined'
in chrome, but why ?

Comment 7 (In reply to #6) by Raymond Camden posted on 9/26/2015 at 2:14 PM

Because you aren't running on a device. This is meant for the device.

Comment 8 by fabio pereira posted on 9/26/2015 at 3:39 PM

It is possible to record audio without going through the native interface of the device ? I did not think infirm solution , I have to implement similar functionality to the whatsapp in a hybrid application with ionic . Would you have any tips ?

Comment 9 (In reply to #8) by Raymond Camden posted on 9/26/2015 at 4:17 PM

If I remember right, the Media plugin, vs Media Capture, will allow for this. Try it.

Comment 10 (In reply to #9) by fabio pereira posted on 9/26/2015 at 5:16 PM

But I do not want to Get a native interface audio recording application I want to implement my own Power interface.

Comment 11 (In reply to #10) by Raymond Camden posted on 9/26/2015 at 5:18 PM

And as I said, i believe the Media plugin doesn't have any UI. Please test it and confirm. It should take you approximately 10 minutes.

Comment 12 (In reply to #11) by fabio pereira posted on 9/26/2015 at 6:17 PM

NOT work I followed step by step instructions of ITS and When I click on the button Open and audio recording application to android

Comment 13 (In reply to #12) by Raymond Camden posted on 9/26/2015 at 10:32 PM

Ah, than it may not be possible. You could try getUserMedia.

Comment 14 (In reply to #13) by fabio pereira posted on 9/26/2015 at 11:06 PM

I used navigator.getUserMedia in navegor worked perfectly , however the phone displays the message that it is not possible acessaro device's microphone . I'm getting desperate my deadline is already over and no solution works properly .

Comment 15 (In reply to #14) by Raymond Camden posted on 9/27/2015 at 11:31 AM

Wish I could help you more, but that's all I got.

Comment 16 by Mokh Akh posted on 11/21/2015 at 6:30 PM

is there anyway to define the output file type i mean mp3 or wav

Comment 17 (In reply to #16) by Raymond Camden posted on 11/23/2015 at 2:37 AM

As far as I know, from reading the docs, there is no way to specify the output.

Comment 18 (In reply to #17) by Mokh Akh posted on 11/25/2015 at 2:00 PM

yes, i used other plugin for generate mp4 file with m4a
thank you very much

Comment 19 (In reply to #18) by Raymond Camden posted on 11/25/2015 at 2:05 PM

Which plugin did you use?

Comment 20 (In reply to #19) by Mokh Akh posted on 11/25/2015 at 2:07 PM
Comment 21 (In reply to #20) by David posted on 11/30/2015 at 9:52 AM

Could you please explain how can I get recorder file? For example I want to upload it to server.

Comment 22 (In reply to #21) by Raymond Camden posted on 11/30/2015 at 11:52 AM

The URL you get points to a local file. You could use the FileTransfer plugin to upload it.

Comment 23 (In reply to #21) by Mokh Akh posted on 11/30/2015 at 12:01 PM

success function return file path
you can use transfer file plugin and pass this path
it's working with me ... let me know if you like to write a sample

Comment 24 (In reply to #23) by David posted on 11/30/2015 at 3:05 PM

Ok, after some digging I faced with new question. Is it possible to capture micro data and transfer it to database as blob object ?and then read it?
What I actually want is, capture audio file and upload it to server. I tried to use it with firebase, but seems firebase will not solve my needs.

Comment 25 (In reply to #24) by Mokh Akh posted on 11/30/2015 at 3:12 PM

i used File Transfer and code as attachment image
https://www.npmjs.com/packa...

also i used ASP.net and read files from http files with key in code
[options.fileKey = "uploadFile";]

its read as file stream and i convert it to byte as well to save to database

------------
sorry for bad English :)

Comment 26 (In reply to #21) by Mokh Akh posted on 11/30/2015 at 4:54 PM

i used ASP.net MVC and the file received in files request as below
HttpPostedFile MyFile = HttpContext.Current.Request.Files["recFile"];
//MyFile.InputStream;

Comment 27 (In reply to #20) by PadraigDoherty posted on 12/16/2015 at 5:48 PM

Did you have any issue with the recording and playback volume being too low with cordova-plugin-audio-recorder?

Comment 28 by priyank agrawal posted on 1/2/2016 at 6:44 AM

hey can you please share the complete code and along with the library or scripts required.. i am a newbie please..

Comment 29 (In reply to #28) by Raymond Camden posted on 1/2/2016 at 10:29 PM
Comment 30 (In reply to #29) by priyank agrawal posted on 1/3/2016 at 7:34 AM

Hey thanx,
But i want to make an app where i have a video and i can record the audio so i cant work with CaptureAudio i need the Media plugin example where the audio is recorded in my app itself without giving control to the OS specific audio recording app.
Do you have something for that ?

Comment 31 (In reply to #30) by Raymond Camden posted on 1/3/2016 at 4:07 PM

Check the cordovedemos repo I have - I've put most of my demos there.

Comment 32 by Rehatul Ambar posted on 1/6/2016 at 10:13 AM

hi, I was Copy paste all your code from github but i'm found an error (see picture) sorry if my question so easily to fix but I'm newbie so I don't know what should I do to fix that error , thank you so much if you want to help me :)

Comment 33 (In reply to #32) by Raymond Camden posted on 1/6/2016 at 2:26 PM

Hmm - thats definitely a bug. You can try removing the $scope.apply call.

Comment 34 by sam xfido posted on 1/11/2016 at 7:53 AM

when i click record nothing happens(android) !!! im new to ionic it will be great help for me if u guide me !!
do we need to install any cordova plugins ????

Comment 35 (In reply to #34) by Raymond Camden posted on 1/11/2016 at 2:08 PM

Please use Chrome Remote Debugging and tell me what you see in the console.

Comment 36 by trina posted on 1/18/2016 at 9:29 PM

Hello! I don't get any errors in the console in Chrome Remote Debugging, however my app doesn't work properly. When I run the app I see this. How can I fix it? I will really appreciate it if you can help me.
Thank you in advance

Comment 37 (In reply to #36) by Raymond Camden posted on 1/18/2016 at 9:51 PM

So the button to add a new sound isn't showing up. In the Network panel, do you see errors there?

Comment 38 (In reply to #37) by trina posted on 1/18/2016 at 10:25 PM

No, no errors there either

Comment 39 (In reply to #38) by Raymond Camden posted on 1/18/2016 at 10:35 PM

Wait - what code are you using the app?

Comment 40 (In reply to #39) by trina posted on 1/18/2016 at 11:00 PM

From the Cordova-Examples repo on Github

Comment 41 (In reply to #40) by Raymond Camden posted on 1/18/2016 at 11:06 PM

Ok, so the button only shows when the Cordova deviceready event is fired. I assume you are building this out as a real app, right?

Comment 42 (In reply to #41) by trina posted on 1/18/2016 at 11:07 PM

yes

Comment 43 (In reply to #42) by Raymond Camden posted on 1/18/2016 at 11:09 PM

Then it may be something in this area:

$scope.cordova = {loaded:false};
$ionicPlatform.ready(function() {
$scope.$apply(function() {
$scope.cordova.loaded = true;
});
});

Add a console.log after loaded is set to true and confirm it shows up.

Comment 44 (In reply to #43) by trina posted on 1/18/2016 at 11:41 PM

Initially I got this error :
Error: [$rootScope:inprog] $digest already in progress
and I removed the $scope.$apply call as you suggested below.
I added it back again now, the html is shown properly and I get the same error again

Comment 45 (In reply to #44) by Raymond Camden posted on 1/19/2016 at 2:27 AM

Hmpth, that thing. So w/o scope apply it works or does nothing?

Comment 46 (In reply to #45) by trina posted on 1/19/2016 at 7:07 AM

Doesn't do anything without it, only shows the screen I originally posted

Comment 47 (In reply to #46) by Raymond Camden posted on 1/19/2016 at 11:54 AM

Then for now, remove the show logic in html so its always there - and just be careful to not click *immediately*. That will get you past that for now. That's all I can suggest.

Comment 48 (In reply to #47) by trina posted on 1/20/2016 at 6:53 AM

Thanks a lot for your help

Comment 49 by fink posted on 1/22/2016 at 9:36 AM

recorded sounds dont play. error in console is ReferenceError: Media is not defined. i am a newbie please help me fix it

Comment 50 (In reply to #49) by Raymond Camden posted on 1/22/2016 at 1:56 PM

This means you probably didn't add the Media plugin.

Comment 51 (In reply to #50) by fink posted on 1/22/2016 at 4:01 PM

I have the plugin

Comment 52 (In reply to #51) by Raymond Camden posted on 1/22/2016 at 4:03 PM

Ok, are you waiting for deviceready to fire? In Ionic this can be done with IonicPlatform.ready.

Comment 53 (In reply to #52) by fink posted on 1/22/2016 at 4:15 PM

yes, but i have modified your code like this

.run(function($ionicPlatform, $rootScope) {

$rootScope.loaded = false;

$ionicPlatform.ready(function() {

$rootScope.loaded = true;

......

because $scope.apply was causing some problems

Comment 54 (In reply to #53) by Raymond Camden posted on 1/22/2016 at 4:44 PM

Then I'd need to dig deeper into your code to figure it out. At that point it has to be paid engagement - sorry.

Comment 55 by Brainium Infotech posted on 4/8/2016 at 11:24 AM

when I press play button, I can't hear in phone 6, can you please suggest. file showing save. but can't play.

Comment 56 (In reply to #55) by Raymond Camden posted on 4/8/2016 at 12:51 PM

Check w/ Safari Remote Debug and see if there is an error in the console.

Comment 57 (In reply to #55) by Gianfra posted on 4/14/2016 at 10:48 AM

look the plugin version, it works like this until version 2.1.0

https://issues.apache.org/j...

Comment 58 by Brainium Infotech posted on 4/16/2016 at 10:53 AM

Hello all I am sending $scope.sound.filePath file to server .3gpp and php convert to wav and save in data base, but when you play server file not playing. please help.

Comment 59 (In reply to #58) by Raymond Camden posted on 4/16/2016 at 10:55 AM

Do you see an error in console?

Comment 60 (In reply to #59) by Brainium Infotech posted on 4/16/2016 at 11:02 AM

var captureSuccess = function(e) {

console.log('captureSuccess');console.dir(e);

$scope.sound.file = e[0].localURL;

$scope.sound.filePath = e[0].fullPath;

$scope.audioFile = $scope.sound.file;

}

I am sent the file path ($scope.audioFile ), now it store. but when php developer change the ext.3gpp to .wav. its not play. is it right way?

Comment 61 (In reply to #59) by Brainium Infotech posted on 4/16/2016 at 11:27 AM

I have not use cordova FileTransfer. is it needed to send $scope.sound.filePath(audio) to server?

Comment 62 (In reply to #61) by Raymond Camden posted on 4/16/2016 at 1:08 PM

Well, not required, but recommended.

Comment 63 (In reply to #60) by Raymond Camden posted on 4/16/2016 at 1:09 PM

This is not what I'm asking. I think we need to back up a bit.

You said you are sending an audio file to your PHP server. It does a conversion, and you want to play the converted audio.

Step one is for you to confirm that your file is being uploaded. I do not use PHP, but look at your PHP server code and add some logging to see if the file comes in. Also, actually look for the converted file on your PHP server.

Comment 64 by Brainium Infotech posted on 4/18/2016 at 6:43 AM

Sorry , I was wrong, file not uploaded.

Can you please help me after recording audio file, how can I send the file to the server. please give me a example code. now I am sending the "$scope.sound.filePath" but can't send anything.

Comment 65 (In reply to #64) by Raymond Camden posted on 4/18/2016 at 11:34 AM

Look into the FileTransfer docs. Since this isn't really on topic for this blog post, if you have issues with FileTransfer, please post your question to StackOverflow.

Comment 66 by Brainium Infotech posted on 4/20/2016 at 10:42 AM

media.stop not working

Comment 67 (In reply to #66) by Raymond Camden posted on 4/20/2016 at 12:23 PM

If you don't see an error in the console, and you can create a reproducible case, then your best option is to file a bug report.

Comment 68 by Piero posted on 5/5/2016 at 9:16 AM

Hi, can you share this project?

Comment 69 (In reply to #68) by Raymond Camden posted on 5/5/2016 at 1:34 PM

The code may be found on this blog post: https://www.raymondcamden.c...

Comment 70 by mani posted on 5/9/2016 at 8:30 AM

As I use navigator.device.capture.captureAudio it always go to error callback saying error code 3 with message cancelled.

Comment 71 (In reply to #70) by Raymond Camden posted on 5/9/2016 at 1:13 PM

Are you using my code exactly or did you modify it? What device and os version?

Comment 72 (In reply to #71) by mani posted on 5/9/2016 at 5:11 PM

I'm using your code exactly. I'm using it on moto x play with Android 6

Comment 73 (In reply to #72) by Raymond Camden posted on 5/9/2016 at 6:00 PM

Ok, check code 3 and see which of the constants it is.

Comment 74 (In reply to #54) by poioq posted on 5/27/2016 at 2:56 PM

hi Raymond, what would you charge to solve an issue in my code very similar to this one?
regards

Comment 75 (In reply to #74) by Raymond Camden posted on 5/27/2016 at 7:49 PM

Not quite sure what you are asking.

Comment 76 by poioq posted on 5/27/2016 at 11:31 PM

Hello Raymond, thank you for sharing that app, it is very insightful and works perfectly!
I'm having a couple issues though
1. you know any way to increase recording volume? I tested on iphone 5s and moto G, the volume is quite low on both devices.
2. Also, I understand the microphone image is provided by the media-capture plugin, so, is not possible at all to override it?
best regards

Comment 77 (In reply to #76) by Raymond Camden posted on 5/28/2016 at 1:24 PM

As far as I know, you don't have control over either.

Comment 78 by Drew Hawken posted on 6/16/2016 at 10:03 PM

The Boromir pic made me laugh loudly .... then cry :D

Comment 79 by Ujjal Saha posted on 7/1/2016 at 12:02 PM

Hello Raymond,

How can I delete origin file after recording? is it possible to delete after uploading the record file and delete below the full path file.

Here is the original path:

fullPath: "file:/storage/emulated/0/Sounds/Voice%20004.m4a"

Thank you.

Comment 80 (In reply to #79) by Raymond Camden posted on 7/1/2016 at 1:10 PM

Yes. Use the File system plugin. There is an API to delete.

Comment 81 by Karthik Mahadevan posted on 8/8/2016 at 10:14 PM

Hello Raymond, thank you for the app and the book. I tried the examples, mysoundboard isn't saving the file in Marshmallow.
fe.copyTo(d, filename, function(e) {
fails with code 1. The cordova-file-plugin isn't working in marshmalow 6.0. Could you please help?

Comment 82 (In reply to #81) by Raymond Camden posted on 8/9/2016 at 1:32 PM

Can you try to get more information about the error? Ie ore than the code.

Comment 83 (In reply to #82) by Karthik Mahadevan posted on 8/9/2016 at 8:07 PM

Hello, In $scope.saveSound, the $scope.sound.file is "file:///storage/emulated/0/Voice%20Recorder/Voice%20046.m4a"

when it hits the fe.copyTo it goes to error message and I get code 1. Sorry I'm just beginning and I couldn't get much out of it yet. I'm working with console messages. I put some debug messages and found out that fe.copyTo is the issue in Android 6. Android 5 below it just works fine.

window.resolveLocalFileSystemURL(loc, function(d) {
window.resolveLocalFileSystemURL($scope.sound.file, function(fe) {
fe.copyTo(d, filename, function(e) {

Thanks,
Karthik.

Comment 84 (In reply to #83) by Raymond Camden posted on 8/10/2016 at 2:00 PM

Hmm - maybe its an issue with the simulator? (Are you using it? Maybe try a real device.)

Comment 85 (In reply to #84) by Karthik Mahadevan posted on 8/10/2016 at 2:19 PM

Hello, no, it is the real device Samsung s6 edge running Android 6.0.1. Wondering whether the cordova file plugin having issues with Marshmallow to access Voice Recorder files. Digging the internet but not finding much. Cordova version 6.3.0 and cordova-plugin-file is 4.2.0.

And yes, lower Android versions this works, both emulator and real. I also tested with iOS 8 and 9 and they are working like champions there as well! :)

Comment 86 (In reply to #85) by Raymond Camden posted on 8/10/2016 at 2:31 PM

You got me here. I've got a modern Android device - but won't have access to it till next week. Will try to test then. Sorry!

Comment 87 (In reply to #86) by Karthik Mahadevan posted on 8/10/2016 at 2:33 PM

Thank you Raymond appreciate it. Also, congratulations on the book, it is very readable and I'm following it word by word. Will post back if I find anything with Android versions.

Comment 88 by Ujjal Saha posted on 9/14/2016 at 8:17 AM

Hello Raymond, I am using samsung tab, tab has no mic to record or call option, when I trying to record project has crashed. Is it work with out mic in any devices? please help

Comment 89 (In reply to #88) by Raymond Camden posted on 9/14/2016 at 2:28 PM

Well it can't work without a way to record audio, but it shouldn't crash. If you remote debug, can you see an error in console?

Comment 90 by Deepanshu Sharma posted on 11/4/2016 at 5:11 AM

hello sir, Is there any way to call record automatically during phone call?

Comment 91 (In reply to #90) by Raymond Camden posted on 11/4/2016 at 2:00 PM

Not that I know of. That's not really on topic for this blog post. I'd check StackOverflow.

Comment 92 by Gerardo Marin posted on 12/2/2016 at 10:05 PM

Hello Raymond Do you know if is possible detected de file media if stop recording or cellphone turn off?
thanks.

Comment 93 (In reply to #92) by Raymond Camden posted on 12/2/2016 at 10:07 PM

Well you know when recording is done, that's when the success handler ran. If the device is turned off, how do you expect any code to run?

Comment 94 (In reply to #93) by Gerardo Marin posted on 12/2/2016 at 10:39 PM

Well do not explain me correctly, the situation is to save the file in a web servidor if by an external agent stop the recording, I hope is possible rescue the file media, thanks for responses

Comment 95 (In reply to #94) by Raymond Camden posted on 12/2/2016 at 10:44 PM

Well to be clear, recording will ALWAYS stop. You can't record forever. But as for uploading, look at the FileTransfer plugin.

Comment 96 by Fernando posted on 12/6/2016 at 1:09 PM

Hola gracias por compartir, queria saber si puedes explicar como hacerlo en Ionic 2

Comment 97 (In reply to #96) by Raymond Camden posted on 12/6/2016 at 2:30 PM

No hablo espanol. Or Spanish.

Comment 98 (In reply to #97) by Fernando posted on 12/7/2016 at 9:55 PM

Hello thanks for sharing, I wanted to know if you can explain how to do it in Ionic 2

Comment 99 (In reply to #98) by Raymond Camden posted on 12/7/2016 at 11:21 PM

Well, the main issues would be the same. What would change is, obviously, the framework. I'm updating some of my Ionic V1 posts for V2, but I can't do them all - it would take forever. ;)

Comment 100 by Fernando Quiroga posted on 3/23/2017 at 4:37 PM

Hi Raymond, is there a way to record the audio without the device launching the record audio file? I want to implement something like whatsapp does, push a button for recording and realease it for stopping from recording, all inside my app

Thanks in advance

Comment 101 (In reply to #100) by Raymond Camden posted on 3/23/2017 at 4:39 PM

I believe the Media plugin, *not* Media Capture, allows this.

Comment 102 by anudeep l posted on 5/24/2017 at 11:33 AM

hi i try your code exactly but am getting this error and also am using media capture plugin.
capture Error No Activity found to handle Intent { act=android.provider.MediaStore.RECORD SOUND }

could you please hepl me regarding this

Comment 103 (In reply to #102) by Raymond Camden posted on 5/24/2017 at 5:38 PM

The first result I got when Googling for this sounds like it could be it: https://stackoverflow.com/q...

Comment 104 by Noman Sadiq posted on 8/14/2017 at 8:28 PM

Hi, I have implementing a same way to record audio file but getting problem. Can you please give me some hint. Here is my stackoverflow post: https://stackoverflow.com/q...

Comment 105 (In reply to #104) by Raymond Camden posted on 8/15/2017 at 4:24 PM

Sorry I don't have much to suggest there.

Comment 106 by Roark McColgan posted on 9/22/2017 at 6:45 AM

Hi Raymond,
Thanks for the great post, you probably saved me days of trying to work this all out so much appreciated.

Everything is working for me except the file will not play (on IOS, haven't tried android as yet) I don't get an error and to see if everything is working I played a publicly accessible remote wav file and it works.

I added a media status call back to the media object and when playing the remote file I get the following status codes:
2 (MEDIA_RUNNING)
4 (MEDIA_STOPPED)

Then the media success callback fires and we release the media object "playAudio():Audio Success" all good!

When I try play my file I get:

2 (MEDIA_RUNNING)
And thats it, it never stops, I dont hear anything and when change the volume buttons the phone indicates volume change instead of ringer volume (when no media is being played) so it's like its trying to play it.

Do you have any idea what could be wrong?
Thanks!

Comment 107 (In reply to #106) by Raymond Camden posted on 9/22/2017 at 11:05 AM

To be clear, are you saying the public file worked but not a local file?

Comment 108 (In reply to #107) by Roark McColgan posted on 9/22/2017 at 11:57 AM

Yeah exactly, so I record the file. Copy from temp directory to the perminent directory and everything seems to be fine, then when I load the file with media using the relative ../library/nocloud. Etc it seems to find it but not play it. If I give a bogus name it fails with an error but trying to play the real file it appears to be trying to play it but I get no feedback.

Comment 109 (In reply to #108) by Raymond Camden posted on 9/22/2017 at 12:31 PM

I'm not sure. If you see no errors in console, maybe try running via XCode and see if something more is displayed there.

Comment 110 (In reply to #108) by Raymond Camden posted on 9/22/2017 at 12:32 PM

Hey - see the comments here (https://issues.apache.org/j.... It may apply.

Comment 111 by David K posted on 11/12/2017 at 9:34 PM

Just wanted to say thanks. Excellent article. I can easily guess at the code comments removed. I recently implemented the very basics of the media plugin using OutSystems. I used all the comments you removed... plus a few more. OutSystems uses a wrapper around the Javascript code needed to talk to plugins. Doing this isolates all calls. Your article was written 2 years ago and my impression, after working with OutSystems, is that nothing ever changes. It's always tough to get stuff done.

Thanks for the injected humour. Cheers.

Comment 112 (In reply to #111) by Raymond Camden posted on 11/13/2017 at 3:43 PM

You are most welcome.

Comment 113 by Imaginativeone posted on 12/22/2017 at 2:24 PM

Is there a resource for doing this on Ionic 3?

Comment 114 (In reply to #98) by Imaginativeone posted on 12/22/2017 at 2:26 PM

Fernando, did you ever figure out how to do this on Ionic 2?

Comment 115 (In reply to #113) by Raymond Camden posted on 12/22/2017 at 2:30 PM

Not from me, no.

Comment 116 (In reply to #114) by Raymond Camden posted on 12/22/2017 at 2:45 PM

To be clear, the UI and app itself changes, the use of the plugins really doesn't. That's the difficult part. You understand that, right?

Comment 117 by jason fadri posted on 1/18/2018 at 2:48 AM

hi sir,
i cant proceed to audio recording because i have an error [ " ReferenceError: Can't find variable:$scope "]. can you help me

Comment 118 (In reply to #117) by Raymond Camden posted on 1/18/2018 at 2:12 PM

Are you using an Ionic/Angular application?

Comment 119 by Kishan Vaishnav posted on 9/28/2018 at 7:10 AM

How did you get value of "loc" in "window.resolveLocalFileSystemURL(loc, function(d) ".
I am having some trouble storing audio file in persistent storage.
Please suggest some solution to my problem posted https://stackoverflow.com/q...

Comment 120 (In reply to #119) by Raymond Camden posted on 9/28/2018 at 2:27 PM

I honestly don't remember. I can say this is the final version of the app: https://github.com/cfjedima...

Comment 121 by kevlangdo posted on 10/3/2019 at 6:32 PM

Hi Raymond
Why not just use the voice recorder in android or ios. It can save the files and share via email, sms, etc.

Comment 122 (In reply to #121) by Raymond Camden posted on 10/3/2019 at 7:06 PM

It's been a few years, but I believe the path I took gave me more control over the UI versus opening up another app.