Play audio from FileDirectory with HtmlAudioElement

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();

};