DOMException: Failed to load because no supported source was found. Нужна помощь

пишу небольшой сайт под выпуск альбома, и там естественно будет музыка и я уже 3 дня бьюсь с разного рода ошибками то оказывается google политику поменял то метод play() возвращает promise в принципе уже все поборол пере использовал, и в итоге вышел на эту проблему. Почитал по интернету возможно я файлы не открыл перед их использованием ,я открыл скажу честно но это ничего не поменяло Может кто сталкивался? Я впервые с этим столкнулся ps Получается против меня google)

  <template>
  <v-app app>
    <!-- <v-card
      app
      max-width="100%"
      class="d-flex justify-center align-center"
    >
      <v-img
        :src="require('../assets/img/Upstart.jpg')"
        max-width="100%"
        max-height="100%"
      />
    </v-card> -->
    <!-- Cами треки -->
    <v-card>
      <v-card-title>
        Треки
      </v-card-title>
      <!-- <audio id="audio" src="../assets/city.mp3" controls type="audio/mp3" crossorigin="anonymous" /> -->
      <v-card-actions>
        <v-btn icon @click="playSound">
          <v-icon> mdi-play-circle-outline </v-icon>
        </v-btn>
        <v-btn icon @click="playStop">
          <v-icon> mdi-stop-circle-outline </v-icon>
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-app>
</template>


<script>
export default {
  data () {
    return {
      showPlayButton: '@/assets/d.mp3'
    }
  },
  created () {
    // eslint-disable-next-line nuxt/no-globals-in-created
    this.playSound()
  },
  methods: {
    playSound () {
      const path = '@/assets/d.mp3'
      const audio = new Audio(path)
      const playPromise = audio.play()

      if (playPromise !== undefined) {
        playPromise.then((_) => {
          console.log('Did you hear that?')
        })
          .catch((error) => {
            if (error.name === 'NotAllowedError') {
              this.showPlayButton(playPromise)
            } else {
              // Handle a load or playback error
            }
            console.log(error)
          })
      }
    },
    playStop () {
      const stopAudio = new Audio().pause()
      if (this.playSound !== 0) {
        return stopAudio
      }
    }
  }
}
</script>

nuxt.config.js

   import colors from 'vuetify/es5/util/colors'

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    titleTemplate: '%s - Nll',
    title: 'Nll',
    htmlAttrs: {
      lang: 'ru'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  target: 'static',
  ssr: false,

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    { src: '@/plugins/vue-plyr', ssr: 'false' }
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify',
    // https://github.com/Tahul/nuxt-use-sound
    ['nuxt-use-sound', {
      sound: {
        d: {
          src: '~/assets/audio/d.mp3',
          options: {
            volume: 0.25
          }
        }
      }
    }]
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
  ],

  // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    customFonts: ['~/assets/fonts.scss'],
    theme: {
      dark: true,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },

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