Including audio file in custom react widget

0
I have a requirement to play a .mp3 file in custom mendix react widget for which I saved the .mp3 file in src > audio folder and imported it on the page to play it, but no luck in playing the file. It says: GET http://localhost:8080/equinix/beep.mp3 404 (Not Found) So I figured that webpack is not bundling this .mp3 files just like how its doing for other images and css files. On researching I found a piece of code to add into webpack.config.dev.js { test: /\.(mp3|wav)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'audio', publicPath: '/', useRelativePaths: true }}]}   But still I face the same error. Kindly help if there is any solution to this problem.
asked
1 answers
0

You may be better off copying the mp3 file to the ‘resources’ folder in your mendix project after webpack has finished.

You can use the webpack shell plugin to automate this:

https://www.npmjs.com/package/webpack-shell-plugin

and copy it to <mx_project>/theme/resources. 

You can reference it in your widget as:

http://localhost:8080/resources/beep/mp3.

 

Or simplify it even more – take the mp3 file out of the webpack build and just commit it into your theme/resources folder in mendix. 

If:

- You do not need to use your widget outside of Mendix

- Your mp3 file is not generated by the widget build/doesn’t change oftent

Then I would just put it into your theme/resources folder and reference it in your widget from there.

 

answered