⚠️ You are looking at the english version of the page. Help us translate it here.

How to extend Webpack to load audio files?

Audio files should be processed by file-loader. This loader is already included in the default Webpack configuration, but it is not set up to handle audio files. You need to extend its default configuration in nuxt.config.js:

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

You can now import audio files like this <audio :src="require('@/assets/water.mp3')" controls></audio>.

If you only want to write: <audio src="@/assets/water.mp3" controls></audio>, you need to tell vue-loader to automatically require your audio files when you reference them with the src attribute:

export default {
  build: {
    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]'
        }
      })
    }
  }
}

잘못된 부분이 있거나 이 문서에 기여하고 싶으신가요? GitHub에서 이 페이지를 수정해주세요!

Platinum Sponsors

Storyblok Support Us