Access audio files

  • I know I can access image files using require('../../assets/myfile.png') for example, but I can’t do the same for audio files, I want to be able make sounds when notifications arrive. I can make play for example in my phoenix app with

    const audio = new Audio('/sounds/alert1.mp3')

  • That should work with Quasar too, AFAIK. It is just straight up JS. However, important to note, the browser must support the <audio>tag for that JS to work.


  • Admin

    @boriscy Hi, you got 2 options:

    1. Place sound files in the statics folder and reference them from there like you did new Audio('/statics/sounds/alert1.mp3') (also check what publicPath you have so that you have the right URL path to where statics will live on the server)
    2. Requiring files in webpack means you need to use a specific loader for them, otherwise Webpack won’t know what to do with them. Look for raw-loader or for an audio file loader (who knows?). Then edit your webpack aliases to insert the new one (either /config/index.js or /build/webpack.base.conf.js depending on the version of your Quasar template that you’re using). Look at the other aliases how are constructed and write yours.


  • Thanks, putting audio files on statics/ dir works, thanks @rstoenescu for your support. You’ve made a wonderful framework.

Log in to reply