I'm currently developing an mp3 (audio) player using Tauri and Vue.js.
Despite trying various solutions, none of them seem to work for me.
The player is implemented with a simple video tag :
<video ref="video" :key="queryUrl" controls>
<source
:key="queryUrl"
:src="sourceUrl"
ref="source"
type="audio/mpeg"
>
</video>
Initially, I attempted to change the source like this:
const appDataDirPath = await appDataDir();
const filePath = await join(appDataDirPath, 'test.mp3');
sourceUrl.value = filePath;
However, I encountered the following error:
Not allowed to load local resource: file:///C:/Users/hangel/AppData/Roaming/com.tauri.dev/test.mp3
Even utilizing Audio from javascript resulted in the same issue:
const audio = new Audio('C:\\Users\\hangel\\AppData\\Roaming\\com.tauri.dev\\test.mp3');
// Not allowed to load local resource
Next, I decided to try out the convertFileSrc function from Tauri's documentation:
const appDataDirPath = await appDataDir();
const filePath = await join(appDataDirPath, 'test.mp3');
const assetUrl = convertFileSrc(filePath);
source.value.src = assetUrl;
video.value.appendChild(source.value);
video.value.load();
Unfortunately, I still received an error:
GET net::ERR_CONNECTION_REFUSED
For my final attempt, I tried using the readBinaryFile function from Tauri:
However, I am unsure how to proceed with the content of my file (Uint8Array).
const content = await readBinaryFile('test.mp3', { dir: BaseDirectory.AppData });
// returns a Uint8Array
// what to do with this array ?