Capacitor File System : Use uri in audio source

I use the capacitor file system to allow user to upload an audio file as follow :

async saveLocalMusic(file: File, musicId: string): Promise<string> { const extension = file.name.split('.').pop() || 'audio'; const fileName = `${musicId}.${extension}`; const path = `music/${fileName}`; const arrayBuffer = await file.arrayBuffer(); const blob = new Blob([arrayBuffer], { type: file.type }); const result = await Filesystem.writeFile({ path, data: blob, directory: Directory.Data, recursive: true }); return result.uri; }

I am storing the uri, and using it in a component to test if audio is working :

private audio!: HTMLAudioElement; ngOnInit(): void { const safeUrl = Capacitor.convertFileSrc(this.musicUrl); this.audio = new Audio(); this.audio.src = safeUrl; this.audio.preload = 'auto'; }

Everything looks fine until here, the `audio.src` raise a GET http://localhost:4200/DATA/music/mymusicfile.ogg 404 (Not Found)

I checked on the indexed database of my browser where the FileStorage is, and the file does exists :

How can I use it as my audio source properly ?