Question

Views

I'm trying to play an audio file in my vue.js project as such:

import sound from '../../recordings/sound.mp4'
const audio = new Audio(sound) 
audio.play()

This works perfectly well, but import may only appear at the top level - not within a function that would ideally accept any audio file.

Now I tried doing it this way:

const audio = new Audio('../../recordings/sound.mp4') 
audio.play()

But then I get this error:

DOMException: Failed to load because no supported source was found

The solution was to use the import statement - but the issue is the the import statement can only be used at the top level - not within a function.

So how can I dynamically play an audio file with vue.js?

about 4 years ago · Juan Pablo Isaza

Answer question

Answer 1 · 2022-06-30T06:42:41.805Z

You can import your audio file inside a function using Dynamic Imports

(async () => {
  let sound = await import('../../recordings/sound.mp4');
  const audio = new Audio(sound);
  audio.play();
})();