Loading Audio Element After Dynamically Changing the Source

Question

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

Answer 1

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