7

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"

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

3 Answers3

1

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');
Ajey
  • 7,924
  • 12
  • 62
  • 86
  • That is the default setting in the latest election version. Please read the my last comment in the question section – sam patel Aug 17 '19 at 15:27
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))

Barkermn01
  • 6,781
  • 33
  • 83
  • 1
    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”. – sam patel Aug 20 '19 at 12:51
  • i don't think there is a feasible way around that. – Barkermn01 Aug 20 '19 at 13:04
0

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()
Max
  • 11
  • 4