How to upload file.mp3 to firebase storage in ionic? - angularjs

Question

I am creating an audio recording function in my ionic app. I am using media plugin:
$ ionic cordova plugin add cordova-plugin-media
$ npm install --save #ionic-native/media
I can record the audio and play it successfully like this:
constructor(private media: Media,private base64: Base64) {
this.file = this.media.create('file.mp3');
}
record_audio(){
this.file.startRecord();
}
to uplaod to firebase I cannot directly upload the file.mp3, looks like I need to convert it to Blob or base64 first so I tried doing this but it says "MediaObject cannot be assigned to string":
let filePath: string = 'this.file.mp3';
this.base64.encodeFile(filePath).then((base64File: string) => {
console.log(base64File);
}, (err) => {
console.log(err);
});
The objective is to upload the recorded audio file to firebase. to do that I need to convert this file.mp3 to base64.

Answer 1

startRecording() {
console.log("Started Recording");
this.recording = true;
this.file.createFile(this.file.tempDirectory, 'my_file.m4a', true).then(() => {
const audio: MediaObject = this.media.create(this.file.tempDirectory.replace(/^file:\/\//, '') + 'my_file.m4a');
console.log("Audio assigned to constant audio media object");
console.log(audio);
this.audio = audio;
console.log("Audio assigned to this.audio media object");
console.log(this.audio);
this.audio.startRecord();
this.listenToAudioEvents();
window.setTimeout(() => {
if (this.recording) this.stopRecording();
}, 10000);
});
}
listenToAudioEvents() {
this.audio.onStatusUpdate.subscribe(status => {
console.log("Status of this.audio updated");
console.log(status);
if (status == 4 && this.playingAudio) {
console.log("Time to stop playback")
this.stopPlayback();
}
});
}
stopRecording() {
this.audio.stopRecord();
console.log("Stopped Recording");
console.log(this.audio);
this.recording = false;
this.audioReady = true;
this.audio.getDuration();
console.log("Audio Duration: " + this.duration);
console.log("Audio Duration Property: " + this.audio.duration);
}
playAudio() {
console.log("Playing Audio");
this.playingAudio = true;
this.audio.play();
}
stopPlayback() {
console.log("Stopping Playback");
this.playingAudio = false;
this.audio.stop();
}
uploadAudio() {
console.log("Uploading record");
this.storeRecord().subscribe((downloadURL) => {
console.log("Finished storing record");
console.log("Download URL is " + downloadURL);
this.audioURL = downloadURL;
this.audioURLReady = true;
});
}
storeRecord() {
return Observable.create((observer) => {
console.log('Saving record');
const filePath = `${this.file.tempDirectory}my_file.m4a`;
console.log("Path to record is " + filePath);
const readFile: any = window['resolveLocalFileSystemURL'];
return readFile(filePath, (fileEntry) => {
return fileEntry.file((file) => {
const fileReader = new FileReader();
fileReader.onloadend = (result: any) => {
let arrayBuffer = result.target.result;
let blob = new Blob([new Uint8Array(arrayBuffer)], { type: 'audio/m4a' });
console.log("Blob is ");
console.log(blob);
var storageRef = firebase.storage().ref('content/' + this.firebase.user.uid + '/my-file.m4a');
console.log("Storage reference is " + storageRef);
var uploadTask = storageRef.put(blob);
console.log('Upload started:');
uploadTask.on('state_changed', (snapshot) => {
console.log("state changed");
let percent = uploadTask.snapshot.bytesTransferred / uploadTask.snapshot.totalBytes * 100;
console.log(percent + "% done");
}, (e) => {
console.error(e);
observer.error(e);
}, () => {
var downloadURL = uploadTask.snapshot.downloadURL;
console.log('Storage Download URL:' + downloadURL);
observer.next(downloadURL);
});
};
fileReader.onerror = (e: any) => {
console.error(e);
observer.error(e);
};
fileReader.readAsArrayBuffer(file);
}, (e) => {
console.error(e);
observer.error(e);
});
}, (e) => {
console.error(e);
observer.error(e);
});
});
}
downloadAudio() {
console.log("Downloading Audio")
const fileTransfer: FileTransferObject = this.fileTransfer.create();
var destPath = (cordova.file.externalDataDirectory || cordova.file.dataDirectory) + "my_file.m4a"
fileTransfer.download(this.audioURL, destPath, ).then((entry) => {
let rawAudioURI = entry.toURL();
this.audioURI = rawAudioURI.replace(/^file:\/\//, '/private');
this.audioURIReady = true;
console.log("Audio URI: " + this.audioURI);
}, (error) => {
console.error(error);
});
}
playAudioURI() {
console.log("Playing AudioURI");
let downloadedAudio: MediaObject = this.media.create(this.audioURI);
console.log("Downloaded audio: " + downloadedAudio);
downloadedAudio.play();
}
}