Play local audio files in My app without using the input type file

Question

I am creating an electron app and want to play local audio file(from the computer not my project dir) without using the input type file.

I have tried the traditional way of create a new Audio instance and providing it the absolute path the mp3 file

inside createAudio()

const player = new Audio('/Absolute/path/to/music.mp3');
player.play();

I expect it to play the audio file but for whatever reason it throws "Uncaught (in promise) DOMException"

Lianna

You cannot do this, any browser would block a request (like the one you're implicitly doing with new Audio(...)) that is trying to read local files from a web page. – Bethune

I am creating the webpage for electron so that should still work right? I tried it in other electron app's console and it seems to work fine – Lianna

Oh sorry, you're right. Maybe this is your problem then? github.com/electron/electron/issues/13525 look at the issue and then at the bottom for a solution. I don't know much more about Electron unfortunately. – Bethune

I don't think that is the problem because the 'autoplayPolicy: "no-user-gesture-required"' is the default for the latest electron version. It seems to work fine when I set the webSecurity to false when I create the BrowserWindow – Lianna

What is the string of the exception? player.play().catch(e => console.error(e))? – Baruch

Answer 1

In Javascript or HTML, a path starting / is an absolute path to the URLs schema, hostname & port E.G http://localhost, http://localhost:8080

so URL of /Absolute/path/to/music.mp3 running on localhost would become http://localhost/Absolute/path/to/music.mp3 now while this might not be a problem for you, you should always use absolute filesystem paths when accessing the file system. E.G const player = new Audio('file:///Absolute/path/to/music.mp3'); this will point to the local file.

However, you might run into CORS problems if that is the case you need to disable the CORS on the browser it using, in which case you need to the answers on Electron (chromium) disable web security

If this does not work we need to see the exception that is being uncaught,

player.play().catch(e => console.error("audio play failed with: "+e)) if you have the console output showed, or player.play().catch(e => alert("audio play failed with: "+e))

Baruch

I disabled web security and works just fine. But is there a way or workaround to this problem because I don’t want to make my vulnerable. Also the exception is “failed to load because source was not found”. – Lianna

i don't think there is a feasible way around that. – Baruch

Answer 2

You need to make changes to auto play policy. Add the below line in the main process of electron and try.

app.commandLine.appendSwitch('autoplay-policy', 'no-user-gesture-required');

Adaiha

That is the default setting in the latest election version. Please read the my last comment in the question section – Lianna

Answer 3

For renderer process you can use html5 audio with base64 data instead of sound file url:

import soundBase64Data from '../path/to/sound.wav'

new Audio(soundBase64Data).play()

Upland

Just a note this should never be done you should never ever load an entire binary file in any format base64, base32 or otherwise, You will be making the browser download that as part of the sites download (and base64 is larger than the exe in raw binary) and that would slow down load times for something that might not be needed. – Baruch