Call me!
cell: 612-730-9540

Audio.JS

Project Winter 2014:

Anthony Kolber's audio.js Library

Anthony Kolber created audio.js library, a progressively enhanced solution to making the HTML5 <audio> element work in new browsers and old browsers so long as you have the Flash plugin installed in old browsers.

Some Bits And Pieces From The Documentation Available With The Dowloaded Files

Browser & format support

With Flash as a fallback, it should work pretty much anywhere.
It has been verified to work across:

Mobile Safari (iOS 3+)
Android (2.2+, w/Flash)
Safari (4+)
Chrome (7+)
Firefox (3+, w/ Flash)
Opera (10+, w/ Flash)
IE (6, 7, 8, w/ Flash)

A few things about ogg

audio.js focuses on playing mp3s. It doesn’t currently support the ogg format. As mp3 is the current defacto music transfer format, ogg support is lower on our list of priorities.

For more info and to download this library go to http://kolber.github.io/audiojs/.

Title: Ghosts
Artist: Mark Jensen
Date: 9/18/2011

The Code Reveal:

First: The HTML


<audio src="ghosts.mp3" preload="auto" />

If you right-click and save this file on your desktop you will need to convert it to other formats for testing. Here are some free online media formating websites: Online-Convert.com and Media.io.

Next: The Script


<script src="audiojs/audio.min.js"></script>
<script>
  audiojs.events.ready(function() {
    var as = audiojs.createAll();
  });
</script>

You need to download and put three files into a folder called audiojs per the documentation. Put audio.js, player-graphics.gif & audiojs.swf in the same folder.

Lastly: The CSS


.audiojs { width: 360px!important; }
.audiojs .scrubber { width: 180px!important; }

I wanted to make the player 50% of the parent element width in desktops and tablets but 100% the width in smartphones. The audio.min.js file uses pixel width so my goal was to keep it simple and make the player width 100px less.

".audiojs" is the width of the whole element and in Anthony Kolber's audio.min.js file is ".audiojs { width: 460px; ...}" so in my CSS I overwrote it as 360px!important to overwite his value. You can edit his audio.min.js file, I chose to do it this way.

".scrubber" is the width of the moving bar and in Anthony Kolber's audio.min.js file is ".audiojs .scrubber { ... width: 280px; ...}" so I changed that by 100px also.

Still a little wide in modern smartphone landscape view, but it's a start.

Here is the document that spells out the audio.min.js file where the CSS is defined http://kolber.github.io/audiojs/docs/.

After I got this working I found a link to another script that creates not only audio but video support for modern and older browsers - MediaElement.js - and perhaps I'll look into that sometime soon.

Addendum: Some Changes


.audiojs { width: 50%!important; }
.audiojs .scrubber { width: 43.75%!important; }
@media screen and (max-width: 649px){
.audiojs { width: 100%!important; }
.audiojs .scrubber { width: 43.75%!important; }
}

I recently made a change to make this more responsive so in smaller mobile device viewports the audio player would fit the screen.

Contact me

If you would like to speak with me more about my qualifications, experiences and what I can do for you please feel free to contact me.