I'm trying to play a sound and i have found two ways that works for me. Which is the better way and why? is a good idea add a "load" event listener?

First way:

$(document).ready(function() {  
  var audioElement = document.createElement('audio');  
  audioElement.setAttribute('src', 'sound.ogg');  
  audioElement.addEventListener("load", function(){  
      audioElement.play();  
  }, true);

  audioElement.play();  
});

Second way:

$(document).ready(function() {  
  audioElement = new Audio('sound.ogg');  
  audioElement.play();  
});

I'm trying to play a sound and i have found two ways that works for me. Which is the better way and why? is a good idea add a "load" event listener?

First way:

$(document).ready(function() {  
  var audioElement = document.createElement('audio');  
  audioElement.setAttribute('src', 'sound.ogg');  
  audioElement.addEventListener("load", function(){  
      audioElement.play();  
  }, true);

  audioElement.play();  
});

Second way:

$(document).ready(function() {  
  audioElement = new Audio('sound.ogg');  
  audioElement.play();  
});

• javascript
• jquery
• html
• html5-audio

• what about network source for audio in case new Audio()? – vinnitu Commented Sep 4, 2012 at 7:04

2 Answers 2

You really should go with the first way (with load), because 'DOMReady' doesn't guarantee that the sound file finish downloading, just like with Image.

You really should use a feature detection system for this. I'd use Modernizr to test for HTML5 audio. That way you are only attempting to serve the audio to those who can get it with HTML5.

You can even test for HTML5 features and fallback on alternative if not found by using Modernizr. These alternatives are called "polyfills" and a list of these that Modernizr supports is here.

The benefit of doing it this way is that you are covering all your bases in terms of browser features. I pity the fools out there still using IE7.