Hi,
I’m doing a voice recorder app. I can well record, save it locally with FileSystem but I can’t listening it.
I can see by the console that records are well there. I’m using HTML Audio Element. Below my code.
Many thanks for your help!!!
Function to play file:
async playFile(file) {
const audioFile = await Filesystem.readFile({
path : '/'+file.name,
directory: Directory.Data
});
const base64Sound = audioFile.data;
const audioRef = new Audio(`data:audio/acc;base64,${base64Sound}`);
audioRef.load();
audioRef.oncanplaythrough = () => audioRef.play();
};
all ts file:
import { Component, OnInit } from ‘@angular/core’;
import { Directory, Filesystem, Encoding } from ‘@capacitor/filesystem’;
import { VoiceRecorder, VoiceRecorderPlugin, RecordingData, GenericResponse, CurrentRecordingStatus } from ‘capacitor-voice-recorder’;
import { FirebaseDataService } from ‘…/services/firebase-data.service’;
import { MediaCapture, MediaFile, CaptureError, CaptureImageOptions } from ‘@awesome-cordova-plugins/media-capture/ngx’;
import { Media, MediaObject } from ‘@awesome-cordova-plugins/media/ngx’;
import { File } from ‘@awesome-cordova-plugins/file/ngx’;
@Component({
selector: ‘app-home’,
templateUrl: ‘home.page.html’,
styleUrls: [‘home.page.scss’],
})
export class HomePage implements OnInit {
recordingAudio = false;
storedFilesName = ;
constructor(
private firebaseDb: FirebaseDataService,
private mediaCapture: MediaCapture,
// private storage: Storage,
private file: File,
private media: Media
) {}
async loadFiles() {
Filesystem.readdir({
path:‘’,
directory: Directory.Data
}).then(result => {
console.log(result);
this.storedFilesName = result.files;
});
};
startRecording(){
VoiceRecorder.hasAudioRecordingPermission();
if(this.recordingAudio) {
return;
}
this.recordingAudio = true;
console.log('Start');
VoiceRecorder.startRecording();
};
stopRecording(){
if(!this.recordingAudio) {
return;
}
console.log('Stop');
VoiceRecorder.stopRecording().then(async (result: RecordingData) => {
if(result.value && result.value.recordDataBase64) {
//Save file in directory
const recordData = result.value.recordDataBase64;
console.log('Result---',recordData);
const fileName = new Date().getTime() + '.mp3';
await Filesystem.writeFile({
path: fileName,
directory: Directory.Data,
data: recordData
});
//Save file in Firebase
this.firebaseDb.saveAudioInFirebase(recordData, fileName);
This.loadFile()
}
});
};
async playFile(file) {
const audioFile = await Filesystem.readFile({
path : '/'+file.name,
directory: Directory.Data
});
const base64Sound = audioFile.data;
const audioRef = new Audio(`data:audio/acc;base64,${base64Sound}`);
audioRef.load();
audioRef.oncanplaythrough = () => audioRef.play();
};