Recording and playing back audio on Ionic 3

Question

I am having a weird issue on iOS.

I am using the Ionic Native Media plugin to record audio and trying to play the recording back using the HTML5 Web Audio API (WavesurferJS or HowlerJS). After I record the audio if I try to play the recording back immediately the audio will not play, but if I close the app and then re-open it, the audio will play fine.

The error that HowlerJS is throwing is "error decoding the audio." My thoughts are the Native Media plugin has not fully released the file, thus not giving permissions to HowlerJS to read the audio data.

Any thoughts or direction is appreciated.

Answer 1

https://github.com/ionic-team/ionic-native/blob/master/src/%40ionic-native/plugins/media/index.ts - mentions stuff in comments..

 * Some hints if you are using iOS and recording doesn't work:
 * 1.) Try to use a absolute file path but remove beginning "file://".
 * Then it looks like: `/var/mobile/Containers/Data/Application/AF438B8B-7724-4FBB-8E69-083463224FC4/tmp/my_file.m4a`
 * Example: `this.media.create(this.file.tempDirectory.replace(/^file:\/\//, '') + 'my_file.m4a')`
 * 2.) If that's not working, too, create the file before using.
 * Example:
 * ```typescript
 * import { Media, MediaObject } from '@ionic-native/media';
 * import { File } from '@ionic-native/file';
 *
 * ...
 *
 * constructor(private media: Media, private file: File) { }
 *
 * ...
 *
 * this.file.createFile(this.file.tempDirectory, 'my_file.m4a', true).then(() => {
 *   let file = this.media.create(this.file.tempDirectory.replace(/^file:\/\//, '') + 'my_file.m4a');
 *   file.startRecord();
 *   window.setTimeout(() => file.stopRecord(), 10000);
 * });
 * ```
 *
 * You can find the reasons here: https://github.com/ionic-team/ionic-native/issues/1452#issuecomment-299605906
 * @classes
 * MediaObject
 * @interfaces
 * MediaError
 */

Answer 2

Use Cordova Plugin Media :

$ ionic cordova plugin add cordova-plugin-media
$ npm install --save @ionic-native/media

Useful article from ionic doc :

https://ionicframework.com/docs/native/media/