DOMException: Failed to load because no supported source was found

[chenphilip14]

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?

[m3g4p0p]

@chenphilip14

new Audio("../../media/KR881.mp3")

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.

[chenphilip14]

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

[m3g4p0p]

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()
})

[goofyfoot]

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 …