I am creating an electron app and want to play local audio file(from the puter 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"

I am creating an electron app and want to play local audio file(from the puter 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"

• javascript
• audio
• electron
• html5-audio

• 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. – Marco Bonelli Commented Aug 16, 2019 at 2:19
• 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 – sam patel Commented Aug 16, 2019 at 2:20
• Oh sorry, you're right. Maybe this is your problem then? github./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. – Marco Bonelli Commented Aug 16, 2019 at 2:29
• 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 – sam patel Commented Aug 16, 2019 at 2:36
• What is the string of the exception? player.play().catch(e => console.error(e))? – Barkermn01 Commented Aug 20, 2019 at 9:39

3 Answers 3

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 bee 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))

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

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

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