I have in my html an audio tag, in which I have src="". When I play music, I change the src value from javascript. However, when loading a page, I get an error

Invalid URI. Load of media resource failed. game.php All candidate resources failed to load. Media load paused.

I know why, the source logically does not exist. Is there any way to tell the audio element not to try to load the src from the beginning?

<div style="display: none;" >
<audio tabindex="0" id="audio" controls preload="auto" loop="true">
    <source src="">
</audio>
</div>

Thanks

I have in my html an audio tag, in which I have src="". When I play music, I change the src value from javascript. However, when loading a page, I get an error

Invalid URI. Load of media resource failed. game.php All candidate resources failed to load. Media load paused.

I know why, the source logically does not exist. Is there any way to tell the audio element not to try to load the src from the beginning?

<div style="display: none;" >
<audio tabindex="0" id="audio" controls preload="auto" loop="true">
    <source src="">
</audio>
</div>

Thanks

• javascript
• php
• html

2 Answers 2

Simply create your <audio> element without any <source>s, like

<audio tabindex="0" id="audio" controls preload="auto" loop="true">
</audio>

Then add a <source> during runtime, whenever needed/checked/validated, with something like e.g.:

var audio = document.getElementsByTagName('audio')[0];
  
var source = document.createElement('source');console.log(source);
source.setAttribute('src','http://somewhere');
  
audio.appendChild(source);

Remove <source> from initial html and then...

var a = new Audio('someaudio.mp3');

// File does not exist
a.onerror = function() {
    //nothing
};
//File exists
a.onloadeddata = function() {
    //add source from javascript
};