I have a vue.js project where I play audio files that are stored in my public folder:

Previously, I was able to access and play these files as such:

 path = 'recordings/Behar/weekday/1.mp3'
 this.audio = new Audio(path);
 this.audio.play()

But after adding the vue-router in main.js:

const routes = [
  { path: '/', component: Controller },
  { path: '/date/:date', component: Controller },
  { path: '/date/:date/aliyah/:aliyah', component: Controller },
  { path: '/date/:date/aliyah/:aliyah/verse/:verse', component: Controller },   
]

const router = new VueRouter({
  mode: 'history',
  routes // short for `routes: routes`
})

Vue.use(VueRouter)

Vue.config.productionTip = false

new Vue({
  router,
  vuetify,
  render: h => h(App)
}).$mount('#app')

When I try to play these recordings I see this message:

Uncaught (in promise) DOMException: Failed to load because no supported source was found.

I believe that somehow adding the vue-router has screwed up with my access to the public folder.

Why am I no longer able to access the public folder and how (and if at all) has vue-router changed that?