CODEWITHSUNDEEP
htmlnuxt.jsbootstrap-vue
Anil Kumar
Anil Kumar

Reputation: 41

'Unable to play an audio file in Nuxt.js app'

I am working on a simple nuxt.js project that plays two audio files and asks the user to determine the audio interval between them. I am currently unable to play any audio files. I took in this solution (https://nuxtjs.org/docs/features/configuration/#extend-webpack-to-load-audio-files) but its not working

also I added in nuxt.config.js

  loaders: {
      vue: {
        transformAssetUrls: {
          audio: 'src',
        },
      },
    },
    extend(config, ctx) {
      config.module.rules.push({
        test: /\.(ogg|mp3|wav|mpe?g)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]'
        }
      })
    }

and here my code

 <div class="col-sm-12 col-sm-offset-2">
            <audio
              src="@/assets/audios/podcast1.mp3"
              controls
              class="audio my-3"
            ></audio>
          </div>

Upvotes: 1

Views: 1930

Answers (2)

Anil Kumar
Anil Kumar

Reputation: 41

I disabled the esmodule then my audio file working

In nuxtconfigure do like this

extend(config, ctx) {
  config.module.rules.push({
    test: /\.(ogg|mp3|wav|mpe?g)$/i,
    loader: 'file-loader',
    options: {
      name: '[path][name].[ext]',
      esModule: false,

Upvotes: 3

Анатолий Якимов
Анатолий Якимов

Reputation: 76

I have a similar problem. But in my case, I play the sound alert from the code. This code worked previously:

const audio_file = require('@/assets/beeps/some_beep.mp3')
const beep = new Audio(audio_file)
beep.play()

But after the update stopped working. Fix the problem helped:

const audio_file = require('@/assets/beeps/some_beep.mp3').default

I learned it here: https://amjohnphilip.medium.com/how-to-work-with-audio-files-in-nuxt-js-8da7abb3c5bb

Upvotes: 2

Related Questions