Hi Guys,
First of all thanks for a great product - been using it since it almost came out!
Im having a bit of trouble of using the cordova-plugin-media for audio recording and playback. The recording and playback does not work for me.
I have been using almost 2 full days to try all different kind of variations to make it work (googled, asking on slack, looking here etc) - so here it goes. Its probably a path problem - but you guys can probably enlighten me!.
In my config.xml I have added:
<plugin name="cordova-plugin-media" />
<preference name="AllowInlineMediaPlayback" value="true"/> (for html5 playback)
Recording
I am doing this to create a media and do a recording (via microphone):
var name = 'documents://recording_' + randomNum + '.wav';
var recording: Media;
recording = new Media(name,
() => {
console.log('audio success', recording);
},
function (e) { console.log('audio fail: ', e); },
function (status) { console.log('audio status: ', status); }
);
recording.startRecord();
When calling startRecord() it will start and the audio status give me back β2β which is Media.MEDIA_RUNNING. I also gives me no errors. But when I look at the media object it looks like this:
Media {
_duration: -1
_position: -1
id: "03e21af7-ce02-c874-4425-a717631cbffa"
src: "documents://recording_25.wav"
}
And when I try to do a getCurrentPosition() - It returns -1 all the time :
this.posTimer = setInterval( () => {
console.log('posTimer started', rec);
this.localRecord.getCurrentPosition(
(position) => {
console.log('Audio Position: '+ position);
if (position > -1) {
console.log((position) + " sec");
this.localRecordPosition = (position) + " sec";
}
},
// error callback
function (e) {
console.log("Error getting pos=" + e);
}
);
}, 1000);
But getCurrentAmplitude() works and give back a float as it should:
this.ampTimer = setInterval( () => {
console.log('calling ampTimer');
this.localRecord.getCurrentAmplitude(
function (amp) {
console.log('Amplitude: ' + amp + '%');
},
function (e) {
console.log('Error getting amp=' + e);
}
);
}, 1000);
So what do i do wrong? I am trying to store it in documents:// and want it to persist there.
Playing back
I am also having problems playing back medias. I both tried to use the HTML5 and Media to doing playback. Using audio tag and putting the file://β¦ (document path) as a src attribute gives me no sound. Also tried with a src that i know that works. Eg. a http:// path to a wav file. That works in chrome but not on the device. Iβve read about the problems using html5 audio playback and have put the AllowInlineMediaPlayback in my config.xml but still no luck. Also tried Media.play() - no luck either.
Here it the HTML that I have use to test out both HTML5 and Media playback:
<div class="player">
<audio id="subheader-playercontrol" ng-ended="menuCtrl.playerControllerToggle()" webkit-playsinline>
<!--<source src="{{menuCtrl.audioRecord.statusData.src}}" type="audio/wav">-->
<source src="http://www.ankyankyanky.com/_laila.wav" type="audio/wav">
</audio>
<span>10:20</span>
<i class="icon trash" ng-click="menuCtrl.deleteAudioFile(audio)"></i>
<i class="icon play" ng-show="!menuCtrl.isPlaying" ng-click="menuCtrl.playerControllerToggle()"></i>
<i class="icon pause" ng-show="menuCtrl.isPlaying" ng-click="menuCtrl.playerControllerToggle()"></i>
</div>
The controller:
public playerControllerToggle() {
// if (ionic.Platform.isWebView()) {
// media = new Media(mediaSrc, () => { console.log('new media instantiated')}, (e) => { console.log('could not create new media', e)});
// }
if (!this.isPlaying) {
this.playerController.play();
//media.play();
console.log("MEDIA play src: ",mediaSrc);
} else {
//media.pause();
this.playerController.pause();
console.log("MEDIA paused");
}
this.isPlaying = !this.isPlaying;
}
I have tried different path for storing and retrieving the audio file on the OS system but without any luck. Loosing my mind soon. Please help guys!
βCheers!
/Steffen