Search code examples
javascriptaudioelectronhtml5-audio

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

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"

Solution

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