How To Use <audio/> In Nuxt-js Project?

Contents hide

1 How to use <audio/> in Nuxt-js project?

Problem Description:

I keep my mp3 files and image under static file. I can reach my images with below method but i can not reach my mp3 files. I did some settings on nuxt.config.js but still i cant reach mp3 files .

index.vue

   <v-col v-for="i in 28" :key="i" >
    <v-card  active-class="active">
      <v-img :src="require(`@/static/drawable/pic-${i}.png`)" />
      <audio :src="music[i].src" controls/>
    </v-card>
   <v-col/>

<script>
import music from "~/constants/musics.js";

export default {
    setup(){
    
   return{
      music
     }

   }
}
<script/>

*audio output => <audio data-v-14f3866a="" src="[object Module]" controls="controls"></audio>*

music.js

const listOfMusic = [
  {
    src: require("@/static/music/adele.mp3"),
  }
........
];

export default listOfMusic;

nuxt.config.js

    extend (config, { isDev, isClient }) {
      config.module.rules.push({
        test: /.(ogg|mp3|wav|mpe?g)$/i,
        loader: 'file-loader',
        query: {
          name: 'static/raw/[name].mp3'
        }
      })
    },

if i import music files one by one , they will work but this method is expensive for me

import adele from '@/static/raw/adele.mp3'

Solution – 1

You should reference your asset directly using /raw/adele.mp3 as explained in the docs: https://nuxtjs.org/docs/directory-structure/static/#static-assets

No need for a static in your path.

Rate this post