Ionic-native: Media Plugin (Record) create no File on iOS

[danielehrhardt]

Hi i try to create a audio Record but suck now for 3 days on this simple exercice.
On Android all is Working Fine the File was created and then i upload it to my s3 server. But on iOS i think the file is never created.

I use Ionic Native 3.6.1 and Ionic 3.

This is my code:

  // Create Speechmeme
  speechmeme: MediaObject;
  recording: boolean = false;
  speechmemeUri: string;
  _nameFile: string = 'speechmeme';


  onWait = (...args) => console.log('media progress', args);
  onSuccess = (...args) => console.log('Media success', args);
  onError = (...args) => console.log('Media error', args);

  recordspeechmeme() {
    console.log('Start recording');

    let path: string = (this.platform.is('ios') ? this.file.dataDirectory : cordova.file.externalDataDirectory);
    let extension: string = (this.platform.is('ios') ? '.wav' : '.mp3');
    let name: string = this._nameFile + '-' + Math.random().toString(36).substring(7) + extension
    this.speechmemeUri = path + name;

    this.clearRefresh();
    this.recording = true;
    console.log('Start');
    this.speechmeme = this.media.create(this.speechmemeUri, this.onWait, this.onSuccess, this.onError);
    this.speechmeme.startRecord();

    /*this.media.create(this.speechmemeUri, this.onStatusUpdate).then((file: MediaObject) => {
      this.speechmeme = file;
      this.speechmeme.startRecord();
      console.log('Middle')
    }).catch(e => console.log('Error opening media file', e));
    console.log('End')*/
    //this.speechmeme = this.media.create(this.speechmemeUri)

    /*this.file.createFile(path, name, true)
      .then(res => {


      });*/
  }


  stopRecordspeechmeme() {
    console.log('Stop recording');
    this.recording = false;
    this.speechmeme.stopRecord();
    this.speechmeme.release();

    console.log('File', this.speechmemeUri)
    if (this.platform.is('ios')) {
      this.test(this.speechmemeUri);
      this.uploadFileByFileTransfer(this.speechmemeUri, 'audio/wav').then(() => {
        this.speechmemeUri = null;
        this.speechmeme = null;
      });
    } else {
      this.file.resolveLocalFilesystemUrl(this.speechmemeUri).then((res) => {
        console.log('LocalFileSystem');
        this.uploadFileByFileTransfer(res.nativeURL).then(() => {
          this.speechmemeUri = null;
          this.speechmeme = null;
        });
      }).catch((error) => { console.log(error) });
    }
  } 

and this my xCode output:

2017-05-02 00:12:10.852711+0200 NetzApp[4563:1631487] Start recording
2017-05-02 00:12:10.852808+0200 NetzApp[4563:1631487] Kill Reloading
2017-05-02 00:12:10.852967+0200 NetzApp[4563:1631487] Start
2017-05-02 00:12:10.853966+0200 NetzApp[4563:1631487] Will attempt to use file resource 'file:///var/mobile/Containers/Data/Application/0BC72669-0BD1-4DB8-BB6F-942DB0A059C8/Library/NoCloud/speechmeme-m7u7si.wav'
2017-05-02 00:12:10.854218+0200 NetzApp[4563:1631487] Unknown resource 'file:///var/mobile/Containers/Data/Application/0BC72669-0BD1-4DB8-BB6F-942DB0A059C8/Library/NoCloud/speechmeme-m7u7si.wav'
2017-05-02 00:12:11.357778+0200 NetzApp[4563:1631487] THREAD WARNING: ['Media'] took '500.321777' ms. Plugin should use a background thread.
2017-05-02 00:12:11.358140+0200 NetzApp[4563:1631487] Media error [object Object]
2017-05-02 00:12:15.409284+0200 NetzApp[4563:1631487] Stop recording
2017-05-02 00:12:15.410304+0200 NetzApp[4563:1631487] Media with id 4d814335-d1f2-8e74-64cb-1fa81aebc9ab released
2017-05-02 00:12:15.410391+0200 NetzApp[4563:1631487] File file:///var/mobile/Containers/Data/Application/0BC72669-0BD1-4DB8-BB6F-942DB0A059C8/Library/NoCloud/speechmeme-m7u7si.wav
2017-05-02 00:12:15.410476+0200 NetzApp[4563:1631487] play file
2017-05-02 00:12:15.411022+0200 NetzApp[4563:1631487] Will attempt to use file resource 'file:///var/mobile/Containers/Data/Application/0BC72669-0BD1-4DB8-BB6F-942DB0A059C8/Library/NoCloud/speechmeme-m7u7si.wav'
2017-05-02 00:12:15.411423+0200 NetzApp[4563:1631487] Unknown resource 'file:///var/mobile/Containers/Data/Application/0BC72669-0BD1-4DB8-BB6F-942DB0A059C8/Library/NoCloud/speechmeme-m7u7si.wav'
2017-05-02 00:12:15.412037+0200 NetzApp[4563:1631487] File file:///var/mobile/Containers/Data/Application/0BC72669-0BD1-4DB8-BB6F-942DB0A059C8/Library/NoCloud/speechmeme-m7u7si.wav
2017-05-02 00:12:15.413589+0200 NetzApp[4563:1631781] Will attempt to use file resource 'file:///var/mobile/Containers/Data/Application/0BC72669-0BD1-4DB8-BB6F-942DB0A059C8/Library/NoCloud/speechmeme-m7u7si.wav'
2017-05-02 00:12:15.413908+0200 NetzApp[4563:1631781] Unknown resource 'file:///var/mobile/Containers/Data/Application/0BC72669-0BD1-4DB8-BB6F-942DB0A059C8/Library/NoCloud/speechmeme-m7u7si.wav'
2017-05-02 00:12:15.415847+0200 NetzApp[4563:1631487] Error opening file file:///var/mobile/Containers/Data/Application/0BC72669-0BD1-4DB8-BB6F-942DB0A059C8/Library/NoCloud/speechmeme-m7u7si.wav: Error Domain=NSCocoaErrorDomain Code=260 "Die Datei „speechmeme-m7u7si.wav“ konnte nicht geöffnet werden, da sie nicht existiert." UserInfo={NSFilePath=/var/mobile/Containers/Data/Application/0BC72669-0BD1-4DB8-BB6F-942DB0A059C8/Library/NoCloud/speechmeme-m7u7si.wav, NSUnderlyingError=0x1742499c0 {Error Domain=NSPOSIXErrorDomain Code=2 "No such file or directory"}}
2017-05-02 00:12:15.416081+0200 NetzApp[4563:1631487] FileTransferError {
    code = 1;
    source = "file:///var/mobile/Containers/Data/Application/0BC72669-0BD1-4DB8-BB6F-942DB0A059C8/Library/NoCloud/speechmeme-m7u7si.wav";
    target = "https://netz-app.com/api/chat_message/upload_file";
}
2017-05-02 00:12:15.478888+0200 NetzApp[4563:1631487] Upload failed [object Object]

https://forum.ionicframework.com/t/recording-is-not-working-on-cordova-plugin-media-cant-use-audio-file/88428

https://issues.apache.org/jira/browse/CB-12742

https://forum.ionicframework.com/t/media-plugin-ios-reproducing-audio/62834

[danielehrhardt]

WAV
Failed to initialize AVAudioRecorder

2017-05-02 00:33:16.938150+0200 NetzApp[4597:1638571] Start recording
2017-05-02 00:33:16.938235+0200 NetzApp[4597:1638571] Kill Reloading
2017-05-02 00:33:16.938399+0200 NetzApp[4597:1638571] Start
2017-05-02 00:33:17.010306+0200 NetzApp[4597:1638571] Will attempt to use file resource 'file:///var/mobile/Containers/Data/Application/DFE8E91B-899D-4E57-8849-17AE5B9B796B/Library/NoCloud/speechmeme-ayrpl.wav'
2017-05-02 00:33:17.010589+0200 NetzApp[4597:1638571] Unknown resource 'file:///var/mobile/Containers/Data/Application/DFE8E91B-899D-4E57-8849-17AE5B9B796B/Library/NoCloud/speechmeme-ayrpl.wav'
2017-05-02 00:33:17.474353+0200 NetzApp[4597:1638571] THREAD WARNING: ['Media'] took '461.451904' ms. Plugin should use a background thread.
2017-05-02 00:33:17.474627+0200 NetzApp[4597:1638571] Media error [{"message":"Failed to initialize AVAudioRecorder: (null)\n","code":1}]
2017-05-02 00:33:21.588991+0200 NetzApp[4597:1638571] Stop recording
2017-05-02 00:33:21.589638+0200 NetzApp[4597:1638571] Media with id 042cdf01-a7cb-5e3a-e77d-3ddc255ff854 released
2017-05-02 00:33:21.589687+0200 NetzApp[4597:1638571] File file:///var/mobile/Containers/Data/Application/DFE8E91B-899D-4E57-8849-17AE5B9B796B/Library/NoCloud/speechmeme-ayrpl.wav
2017-05-02 00:33:21.589790+0200 NetzApp[4597:1638571] play file
2017-05-02 00:33:21.590212+0200 NetzApp[4597:1638571] Will attempt to use file resource 'file:///var/mobile/Containers/Data/Application/DFE8E91B-899D-4E57-8849-17AE5B9B796B/Library/NoCloud/speechmeme-ayrpl.wav'
2017-05-02 00:33:21.590434+0200 NetzApp[4597:1638571] Unknown resource 'file:///var/mobile/Containers/Data/Application/DFE8E91B-899D-4E57-8849-17AE5B9B796B/Library/NoCloud/speechmeme-ayrpl.wav'
2017-05-02 00:33:21.590875+0200 NetzApp[4597:1638571] File file:///var/mobile/Containers/Data/Application/DFE8E91B-899D-4E57-8849-17AE5B9B796B/Library/NoCloud/speechmeme-ayrpl.wav
2017-05-02 00:33:21.591141+0200 NetzApp[4597:1638678] Will attempt to use file resource 'file:///var/mobile/Containers/Data/Application/DFE8E91B-899D-4E57-8849-17AE5B9B796B/Library/NoCloud/speechmeme-ayrpl.wav'
2017-05-02 00:33:21.591256+0200 NetzApp[4597:1638571] -[CDVFileTransfer requestForUploadCommand:fileData:] [Line 224] fileData length: 0
2017-05-02 00:33:21.591380+0200 NetzApp[4597:1638678] Unknown resource 'file:///var/mobile/Containers/Data/Application/DFE8E91B-899D-4E57-8849-17AE5B9B796B/Library/NoCloud/speechmeme-ayrpl.wav'
2017-05-02 00:33:22.111480+0200 NetzApp[4597:1638726] File Transfer Finished with response code 200
2017-05-02 00:33:22.160065+0200 NetzApp[4597:1638571] Upload [object Object]
2017-05-02 00:33:22.160154+0200 NetzApp[4597:1638571] Files:  [object Object]

M4A

2017-05-02 00:39:53.829249+0200 NetzApp[4604:1640199] Start recording
2017-05-02 00:39:53.829342+0200 NetzApp[4604:1640199] Kill Reloading
2017-05-02 00:39:53.829458+0200 NetzApp[4604:1640199] Start
2017-05-02 00:39:53.915747+0200 NetzApp[4604:1640199] Will attempt to use file resource 'file:///var/mobile/Containers/Data/Application/AF438B8B-7724-4FBB-8E69-083463224FC4/Library/NoCloud/speechmeme-486nz6.m4a'
2017-05-02 00:39:53.915951+0200 NetzApp[4604:1640199] Unknown resource 'file:///var/mobile/Containers/Data/Application/AF438B8B-7724-4FBB-8E69-083463224FC4/Library/NoCloud/speechmeme-486nz6.m4a'
2017-05-02 00:39:53.918797+0200 NetzApp[4604:1640199] Resource for recording must have wav extension
2017-05-02 00:39:53.920698+0200 NetzApp[4604:1640199] Media error [{"message":"Cannot use audio file from resource 'file:///var/mobile/Containers/Data/Application/AF438B8B-7724-4FBB-8E69-083463224FC4/Library/NoCloud/speechmeme-486nz6.m4a'","code":1}]
2017-05-02 00:39:53.920769+0200 NetzApp[4604:1640199] Media error [{"message":"Could not record audio at 'file:///var/mobile/Containers/Data/Application/AF438B8B-7724-4FBB-8E69-083463224FC4/Library/NoCloud/speechmeme-486nz6.m4a'","code":1}]
2017-05-02 00:40:01.167266+0200 NetzApp[4604:1640199] Stop recording
2017-05-02 00:40:01.167917+0200 NetzApp[4604:1640199] Media with id 27191338-e227-0832-40e5-02d606d52d58 released
2017-05-02 00:40:01.167983+0200 NetzApp[4604:1640199] File file:///var/mobile/Containers/Data/Application/AF438B8B-7724-4FBB-8E69-083463224FC4/Library/NoCloud/speechmeme-486nz6.m4a
2017-05-02 00:40:01.168072+0200 NetzApp[4604:1640199] play file
2017-05-02 00:40:01.168524+0200 NetzApp[4604:1640199] Will attempt to use file resource 'file:///var/mobile/Containers/Data/Application/AF438B8B-7724-4FBB-8E69-083463224FC4/Library/NoCloud/speechmeme-486nz6.m4a'
2017-05-02 00:40:01.168687+0200 NetzApp[4604:1640199] Unknown resource 'file:///var/mobile/Containers/Data/Application/

[CHOMNANP]

Hi Daniel,
In case you get it fixed, appreciate if you can share the solution.

[patrickbussmann]

Hey guys,

I found a solution for our problem :sunglasses:
It seems that there are two important things we must know about the plugin.

1. It only accepts tmp and Documents folder, everything else will result not good - like:
   

2. The file must exist before creating the media object (for recording) else you will get some errors and recording will not working - like:
   / https://developer.apple.com/reference/avfoundation/avaudiorecorder

And if you use a correct absolute file path for the first create parameter it's bad, too. - for this plugin.
We must transfer a path like /private/....

This is a working example with cordova-plugin-media with spec="~3.0.1":

import { MediaPlugin } from '@ionic-native/media';
import { File } from '@ionic-native/file';

constructor(
  public media: MediaPlugin,
  public file: File
) { }

record() {
  this.file.createFile(this.file.tempDirectory, 'record.m4a', true).then(() => {
    let mediaObject = this.media.create(this.file.tempDirectory.replace(/^file:\/\//, '') + 'record.m4a');
    mediaObject.startRecord();
    window.setTimeout(() => {
      mediaObject.stopRecord();
      mediaObject.release();
      /** Do something with the record file and then delete */
      this.file.removeFile(this.file.tempDirectory, 'record.m4a');
    }, 10000);
  });
}

[gitdisrupt]

This should not be closed.

Something is not working correctly in that while the first recording works as expected, if you DELETE the tmp file, and then attempt to create a new file with the same name, and then attempt to record to that file, the new recording happens successfully, but when attempting to play it back, the original recording plays as if it is coming from a cached file.

I am currently looking at what apache recommends using their toInternalURL() and / or toURL() methods to generate the correct path... if i can get any of these to work i will post my results here.

apache docs: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/

[gitdisrupt]

I was not able to solve the issue i noted above, but am currently using a workaround.

When creating an audio file for use for recording to, i am creating the file with a unique file name based on a date/time stamp... Once finished recording i am then deleting that file.

When i create a new audio file with a unique name again, i avoid the issue noted above.

What is not clear though is that if i use the sample code provided by @patrickbussmann above, that works the first time around, but NOT if you then delete the file, create a new one with the same name and then record a second time. In that case i am still hearing the original recording on playback.

It _seems_ like iOS records to a tmp file elsewhere despite whatever path/to/file you give it, but i cannot confirm this unfortunately.

[ihadeed]

Looks like an issue with the plugin and not with the Ionic Native implementation. Please seek help in the forums or at the plugin's repo.

Feel free to keep the conversation going here but I'm closing this.

[ceeliro]

Hi nothing above works for me!

@ionic-native = 3.9.2 (latest)
cordova-plugin-media = 3.0.1 (latest)

So simple

  startRecording() {
    // Here we only want to get formated date-time to attach to file name.
    let fileNameAux = this.getNewRecordingFileName();

    const onStatusUpdate = (status) => {
      console.log('UploadAudioPage.onStatusUpdate() -> Audio status: ' + status);
    };
    const onSuccess = () => {
      console.log('UploadAudioPage.onSuccess() -> release');
      this.mediaObject.release();
    };
    const onError = (error) => console.error('UploadAudioPage.onError() -> Unexpected error: ' + JSON.stringify(error));

    fileNameAux = this.file.dataDirectory + fileNameAux;
    if (this.imrCommonsService.isIos()) {
      // https://github.com/driftyco/ionic-native/issues/1452#issuecomment-299605906
      fileNameAux = fileNameAux.replace(/^file:\/\//, '');
    }
    console.log('UploadAudioPage.startRecording() -> fileName: ' + fileNameAux)
    this.mediaObject = this.media.create(fileNameAux,
      onStatusUpdate, onSuccess, onError);
    this.isStartRecording = true;
    this.mediaObject.startRecord();
    if (!this.isNewRecord) {
      this.isNewRecord = true;
    }

    this.fileName = fileNameAux;
  }

  stopRecording() {
    this.mediaObject.stopRecord();
    this.isStartRecording = false;
  }

  startPlayback() {
    this.mediaObject.play();
    this.isPlayingRecord = true;
  }

  stopPlayback() {
    this.mediaObject.stop();
    this.isPlayingRecord = false;

    console.log('UploadAudioPage.stopPlayback() -> filename: ' + this.fileName);   
    this.file.resolveLocalFilesystemUrl(this.file.dataDirectory + this.fileName).then(res => {
      console.log(res.toURL());
    }).catch(error => {
      console.log(JSON.stringify(error));
    })
  }

For IOS I need to mandatory use tempDirectory in order to record and playback otherwise I get:

console.log: UploadAudioPage.onError() -> Unexpected error: {"message":"Failed to start recording using AVAudioRecorder","code":1}

Using tempDirectory I can record and playback but then I cannot use the new recorded file in another part of the application, example in the stopPlayback method. Error thrown:

console.log: {"code":1,"message":"NOT_FOUND_ERR"}

For Android I get following behaviour
If I use dataDirectory I can record but I can't playback.

console.error: UploadAudioPage.onError() -> Unexpected error: {"code":1}

If I use externalDataDirectory I can record and playback but can't access the file later. I check file system and the new recorded file is there but using the File API to access to it gives me the error:

console.log: {"code":5,"message":"ENCODING_ERR"}

Creating media without path only file name like "timestamp.m4a" It behaves the same for IOS than for Android, I can record and play but again I cannot find where the file is stored therefore can't play with it after recording

Any light on this please. I have done almost everything, even creating file beforehand but without success. If I created the file beforehand this is not filled with audio (zero size)

Is something wrong with my code?

Thanks in advance

[ceeliro]

My mistake. Following the advice from @patrickbussmann that file needs to be created beforehand and that only works for temp and documents directories then it works. So forget my previous comment. The fact is that I was removing 'file://' from the path to the file but I wasn't adding it back for manipulating it later... Silly me!

Thanks guys for the good work!

[dlinc15]

I know this is a closed issue -- but I just hit the same error trying to record on iOS, and wanted to add that v3.0.0 seems to've had an error in the media player plugin on iOS. My codeset was working fine in v2.4 but when I bumped it up it failed in iOS. There appears to be a fix that works in v3.0.1, so try upgrading if you are still looking for solutions.

Also, as far as writing directly to storage, you can use the "documents://" macro to indicate permanent documents in your build, as per

my_recorder = new Media("documents://" + mediaRecFile, onMediaCallSuccess, onMediaCallError, recordThisStatus);

Check the iOS quirks info here -- https://github.com/apache/cordova-plugin-media#mediastartrecord

[xl496255535]

iOS录制语音 不好用 怎么解决啊大神们

let fname = new Date().getTime() + ".m4a";

  this.file.createFile(this.file.tempDirectory, 'fname', true).then(() => {
    this.recfile = this.file.tempDirectory.replace(/^file:\/\//, '') + fname;
    this.mediaObject = this.media.create(this.recfile);
    //  开始录音
    this.mediaObject.startRecord();
  });

[jpfortin]

I've been playing with audio for a while now, here is what I've found.

In iOS if you need to play a sound synchronously as part of sequence or transition, the only thing that worked for me is Native Audio preloadComplex with file in my /asset.

import { NativeAudio } from '@ionic-native/native-audio';

...

let id = new Date().toISOString();
this.nativeAudio.preloadComplex(id, 'assets/file.m4a', 1, 1, 0).then(() => {
  this.nativeAudio.play(id, () => {
    this.nativeAudio.unload(id).then(() => {
      // Next step
    });
  });
});

If the sound can be play asynchronously and is user recorded, the only thing that worked for me is Media Plugin.

import { Media, MediaObject } from '@ionic-native/media';

...

if (this.mediaObject) {
  this.mediaObject.release();
}      
this.mediaObject = this.media.create('../Library/NoCloud/MediaFiles/file.m4a');

this.mediaObject.play();
// OR
this.mediaObject.startRecord();

...

ionViewDidLeave() {
  if (this.mediaObject) {
    this.mediaObject.release();
  }
}

[EugeneSnihovsky]

@xl496255535 Today I faced this problem in application with a Japanese name. Problem was in cordova plugin media, that encode path to file. And solution is

this.recfile = decodeURIComponent(this.file.tempDirectory).replace(/^file:\/\//, '') + fname;
this.mediaObject = this.media.create(this.recfile);

Maybe you have similar problem.

[Fernando84]

@patrickbussmann Hi Patrickbussmann , your solution is really great . I'm using ionic 1 , I followed your steps one by one and fixed it . Really appreciate your solution !!

key steps : 1) create a new file before create Media object 2) remove "file://" from your path
3)It only accepts tmp and Documents

  $cordovaFile.createFile(cordova.file.tempDirectory, filename + ".m4a", true)
  .then(function (success) {
    recordPath = cordova.file.tempDirectory + filename + ".m4a";
    recordMedia = new Media(recordPath.replace(/^file:\/\//, ''),
      // success callback

[mariohmol]

My tmpDirectory its alwasy null.. using the cacheDirectory instead.. tryed many things.. it pass through all the listeners.. but after i try to access the file using the path with a file:// to fileupload (it shows 0 bytes) our to a

[wingo7]

Hi, all, does this plugin support playing like this ipod-library://item/item.mp3?id=15756509022214662 ? I can't play audio with this url, for html 5 audio element that works

[MadyAkira]

Hey guys,

I found a solution for our problem 😎
It seems that there are two important things we must know about the plugin.

1. It only accepts tmp and Documents folder, everything else will result not good - like:
   
2. The file must exist before creating the media object (for recording) else you will get some errors and recording will not working - like:
   / https://developer.apple.com/reference/avfoundation/avaudiorecorder

And if you use a correct absolute file path for the first create parameter it's bad, too. - for this plugin.
We must transfer a path like /private/....

This is a working example with cordova-plugin-media with spec="~3.0.1":

import { MediaPlugin } from '@ionic-native/media';
import { File } from '@ionic-native/file';

constructor(
  public media: MediaPlugin,
  public file: File
) { }

record() {
  this.file.createFile(this.file.tempDirectory, 'record.m4a', true).then(() => {
    let mediaObject = this.media.create(this.file.tempDirectory.replace(/^file:\/\//, '') + 'record.m4a');
    mediaObject.startRecord();
    window.setTimeout(() => {
      mediaObject.stopRecord();
      mediaObject.release();
      /** Do something with the record file and then delete */
      this.file.removeFile(this.file.tempDirectory, 'record.m4a');
    }, 10000);
  });
}

In 2020 It's working using cacheDirectory also. (tested on ios and android)