DOMException: Failed to load because no supported source was found

I want to play a music file with a click of a button, but I am thrown this error:

DOMException: Failed to load because no supported source was found.

This is the button that calls the play music function:

<button  v-on:click="playMusic()">Play Song</button>

This is my play music function:

playMusic: function() {
                var audio = new Audio("../../media/KR881.mp3");
                audio.play();
            },

How can I fix this error?

Hi @chenphilip14, are you maybe trying to load the audio file from your file system? This won’t work, you’ll have to pass a URL to the audio source.

If you’re using some sort of dev server though (such as vue-cli-service serve), make sure that the media folder is served as a static asset folder and the path is correct – that is, relative to the app root, not relative to the path of the component playing the sound.

1 Like

So there’s virtually no way to play an audio file from my file system? I’m not running any dev server.

Well you might add an audio element with the src pointing to your audio file, and then play that like so:

<audio src="./sample.mp3" id="my-audio"></audio>
const audio = document.getElementById('my-audio')
audio.play()

This will also work with your file system… or, if you want to play audio files from the file system of the user visiting your page, you can add a file input and create an object URL from the selected file, which again you can pass to the Audio() constructor:

<input type="file" id="my-audio-select" accept=".mp3">
const select = document.getElementById('my-audio-select')

select.addEventListener('change', () => {
  const file = select.files[0]

  if (!file) {
    return
  }

  const url = URL.createObjectURL(file)
  const audio = new Audio(url)

  audio.play()
})

This might help, I am running this code using Notepad++. Notice the address is my D:\ drive in the tab.
I am not using a server, only opening the html in Edge as my browser. Check out the quick video,

I have no controls enabled yet; I only can get it to play. Page refresh stops it … and I am just figuring out JavaScript on my own. I have basic knowledge, but I am learning … but you can see it works without a server.

Google Drive: https://drive.google.com/file/d/1V67pJFZvP9lqPGAX0SmtJwyVf9G3FCUg/view?usp=sharing

Peace …