Record and play audio on Ionic 3

Question

I am having a weird issue with iOS.

I use the Ionic Native Media plugin to record audio and try to play the recording using the HTML5 Web Audio API (WavesurferJS or HowlerJS). After recording the sound, if I try to play the recording right away, the sound will not play, but if I close the application and then open it again, the sound will play normally.

The error that HowlerJS launches is "audio error decoding." My thoughts are the Native Media plugin, which did not fully release the file, therefore does not give HowlerJS permission to read audio data.

Any thoughts or direction are welcome.

Answer 1

https://github.com/ionic-team/ionic-native/blob/master/src/%40ionic-native/plugins/media/index.ts - mentions the material in the 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 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 the Cordova Media plugin:

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

Useful article from an ionic document:

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