CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-audio
Tomas Ramirez Sarduy
Tomas Ramirez Sarduy

Reputation: 17471

Best way to play sound with HTML5 and Javascript

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();  
});

Upvotes: 13

Views: 3254

Answers (2)

tungd
tungd

Reputation: 14897

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.

Upvotes: 2

Andrew
Andrew

Reputation: 1071

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.

Upvotes: 1

Related Questions