html audio cannot find file after changing source through jQuery

Question

I have this audio element in my .html file:

<audio id ="captcha">
      <source id = "capt_wav" src = "doghouse.wav" type = "audio/wav" >
</audio>

and it plays the audio. Now I need to change the src attribute dynamically using jQuery. I then set the original html audio to have no source (src = "") and I use this jQuery code to set the source:

  $('#capt_wav').attr('src',"doghouse.wav");

This actually changes the source, as I can see from the console:

BEFORE:

<source id="capt_wav" src="" type="audio/wav">

AFTER:

<source id="capt_wav" src="doghouse.wav" type="audio/wav">

but in this case it doesn't play the audio, giving me the errors:

Invalid URI. Load of media resource failed. @ file:///home/index.html

All candidate resources failed to load. Media load paused. @ file:///home/index.html

The file is in the folder, any idea why it doesn't work? The html (its source) is identical in both cases.

Have you looked at the value of the src attribute after you change the source file? — Jack Harkness
yes, that's what you see in the "AFTER". I printed the console output before and after. — mar tin

Jack Harkness Jack Harkness · Accepted Answer · 2013-06-25T15:16:54

Try this instead:

$("#capt_wav").attr("src", "doghouse.wav").detach().appendTo("#captcha");

It seems the browser only plays the file when the element is added, not when it is just modified.

html audio cannot find file after changing source through jQuery

1 Answers