2
votes

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.

1
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

1 Answers

5
votes

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.