Loading Audio Element After Dynamically Changing The Source

I have a couple of audio elements that appear in the body of my page. They look like this.

Solution 2:

This is tricky. I would try replacing the whole <audio> element instead of just changing its source. This way, the new audio element hasn't been added to the page, so it will be forced to load the file.

Solution 3:

load() followed by play() right away leads to trouble. Trying listening for the canplay event before attempting to play the audio as suggested in https://stackoverflow.com/a/8705478/1374208