Simple Audio loading test for all browsers

Auto load: Chrome, Firefox, Safari, iOS 8, Kindle Auto play: Chrome, Firefox, Safari Play on user interaction: iOS 8, Kindle

by Steven Lambert

HTML

<button class="play">Play</button>
<button class="stop">Stop</button>

CSS

button {
    padding: 10px 20px;
}

JavaScript

var audio = new Audio();
var canPlay = {};

canPlay.mp3 = audio.canPlayType('audio/mpeg;').replace(/no/, '');
canPlay.ogg = audio.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, '');
canPlay.aac = audio.canPlayType('audio/aac;').replace(/no/, '');
canPlay.m4a = (audio.canPlayType('audio/x-m4a;') || canPlay.aac).replace(/no/, '');

function getExtension(url) {
  //http://jsperf.com/extract-file-extension
  return url.substr((~-url.lastIndexOf(".") >>> 0) + 2);
};

function loadAudio(sources) {
    var playableSource;
    
    for (var i = 0, source; source = sources[i]; i++) {
      if ( canPlay[getExtension(source)] ) {
        playableSource = source;
        break;
      }
    }
    
    audio.addEventListener('canplay', function() {
        alert('loaded');
        
        // test auto playing once loaded
        audio.play();
    });
    
    audio.onerror = function(error) {
        alert(error.message);
    };
    
    // test auto loading
    audio.src = playableSource;
    audio.preload = 'auto';
    audio.load();
}

// playing from user interaction
document.querySelector('.play').addEventListener('click', function() {
   audio.play(); 
});

document.querySelector('.stop').addEventListener('click', function() {
   audio.pause(); 
});

loadAudio(['http://sklambert.com/assetManager/examples/audio/mink_pohawk.mp3', 'http://sklambert.com/assetManager/examples/audio/mink_pohawk.ogg']);