0

I have created an electron app consisting a sound effect. I am using the package sound-play to play the sound effect in my main.js file (learned from here). It is working as it should when I am running it through npm start. But after packaging my app using electron-packager, when I am running the exe file from "release-builds" folder, only the sound effect is not playing. All other aspects of the app are working fine.

Shutter.mp3 is the sound file which is present in the project directory

Main.js:

const sound = require("sound-play");
const filePath = path.join(__dirname, "shutter.mp3");
sound.play(filePath)  //For playing the sound inside a function

Package.json:

 "scripts": {
    "start": "electron .",
    "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
    "package-win": "electron-packager . Namegoeshere --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Namegoeshere\"",
    "package-linux": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds"
  },

Using the command npm package-win for packaging.

Just pointing it out again only sound is not playing after packaging. Other aspects are totally fine.

I am probably missing something very basic. Any help would be nice. Thanks.

Aaditya Joshi
  • 122
  • 10

2 Answers2

1

Edit: Similar to the electron-builder solution I listed below, I searched the electron-packager doc and found a similar option for extra files, instead of "files" you will use "extraResource", check it out in the docs.

Original answer:

If you are using webpack to bundle your app before packaging, see if you can include it in your Javascript file and have a file loader in your webpack explained here(blog site), here (Stack overflow), and of course here (webpack official) . Be sure to install File-loader!

I prefer to use Electron builder for packaging apps, if you were to switch, you could include the file into your packaged app as follows:

List the audio file in your JSON settings (package.json) to be included in your packager e.g.:

"build": {
    // ...Other settings go here,
    "files": [
      "path/to/sound.mp3" //<-- This will include the file separately 
      // into your app's build
   ]
}

You can then use a relative path in your app, but if you don't have a similar path in your development build things might get iffy. You can find out more about the electron-builder packaging options on their website. IMO the bundler (webpack) solution would be best. Hope this helps and good luck!

mpmcintyre
  • 614
  • 5
  • 16
0

You can use base64 data instead of sound file path. Also in renderer process with HTML5 Audio:

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

new Audio(soundBase64Data).play() // this line for renderer process only
Max
  • 11
  • 4