Audio wrapper

by PeeHaa

HTML

<h1>Detecting Audio() support...</h1>
<div class="result"></div>
<a href="#">Play notification</a>

CSS

a { display: none; }

JavaScript

function SoundPlayer(audioFile) {
    var self = this;    
    this.audioFile = audioFile;
    this.audioPlayer;
    
    this.init = function() {
        if (self.isHtml5AudioSupported()) {
            $('div.result').append('<p>HTML5 audio is supported</p>');
            if (self.isHtml5AudioMp3Supported()) {
                $('div.result').append('<p>MP3 files are supported</p>');
                self.audioPlayer.src = self.audioFile;
                $('a').show();
            } else {
                $('div.result').append('<p>MP3 files are NOT supported</p>');
            }
        } else {
            $('div.result').append('<p>HTML5 audio is NOT supported</p>');            
        }
    };

    this.isHtml5AudioSupported = function() {
        if (window.Audio) {
            self.audioPlayer = new Audio();
            return true;
        }
        
        return false;
    };

    this.isHtml5AudioMp3Supported = function() {
        return !!self.audioPlayer.canPlayType('audio/mp3;');
    };
    
    this.playNotification = function() {
        self.audioPlayer.play();
    };
}

(function($) {
    var audioPlayer = new SoundPlayer('http://or.cdn.sstatic.net/chat/so.mp3');
    audioPlayer.init();
    
    $('a').click(function() {
        audioPlayer.playNotification();
        
        return false;
    });
})(jQuery);