Play audio files in production

I’ve been trying to follow the advice in #250 to configure playing audio files. That issue was mostly about image files. I added the following to webpack.config.base, inside module: rules: [

{
            test: /\.wav$|\.mp3$/,
            exclude: /node_modules/,
            loader: 'file-loader'
        }

I placed the audio files into an app/audio folder. I was able to import audio using either: import mySound from ‘audio/mySound.wav’ import mySound from ‘…/audio/mySound.wav’ Both work in a developer build. Neither works in the production build, raising a file not found error. I even see the corresponding .wav file in the /dist folder, but don’t know how to reference the correct path in the code. It looks like the HTTP get is trying to find the file in a /dist directory within the current router path.

In a developer build, I can also use: new Audio(path.resolve(‘./app/audio/mySound.wav’)) This also doesn’t work in a production build.

I’ve tried lots of different combinations of path names, but none seem to work. This seems like a common use case. But I can’t find any documentation, or StackOverflow guidance, on how to correctly import (or read) an audio file that will consistently work in both developer and production builds.

Is import the preferred way? If not, where should I place the audio files and how do I get them into the build process? Do I need to specify different paths for developer vs. production?

Thanks very much for your help, and your extremely useful boilerplate.

[amilajack]

Made this example for you. Hope it helps. It took some time to put together this example. A donation would be nice 😃

[jsrhome]

I found that I could import the audio file, construct a path name relative to the app.asar/dist folder, and then use that path name for the Audio() constructor. I needed to add a webpack file-loader for audio files (in my case, it is a .wav file). Then I use the code similar to:

import audioSrc from '..\audio\myAudio.wav' … const resourcesPath = process.resourcesPath; let audioFileName, audioPath, sound; audioFileName = path.basename(audioSrc); if(isElectron()) { audioPath = path.resolve(resourcesPath, './app.asar/dist/' + audioFileName); sound = new Audio(audioPath); }

There has to be a better way, but this way worked for me.