Question

I am attempting to write a page with multiple <audio> tags in it and the page load takes forever (I have around 30 audio clips). A solution I saw was to leave the src="" empty and then dynamically populate when you click on a link…

http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/

My snytax is wrong, but it has to do 2 things when the button is clicked. It has to load the video by populating the src and then playing the clip. I thought the following code would work:

document.getElementById('1')[0].src = '1.aif';.play()

Answer 1

Statements are executed separately, so .play() doesn’t execute on the element. It’s invalid, since a statement cannot start with ..

What you seem to want is “chaining style” (execute several things elegantly in one statement), which jQuery enables you to use:

$("#1").attr("src", "1.aif").play();

Or in pure JavaScript:

var elem = document.getElementById('1'); // returns one element, not an array
elem.src = '1.aif';
elem.play();