HTML5 Jukebox Well Fitted

What’s up guys.

3MD4WVMJSQWZ

Recently I’m terribly frustrated that I can’t listen to ‘Club Can’t Handle Me’ on my dad’s iPhone, so I decided to try out the new HTML5 coding.

HTML5? It’s a new batch of codes that can be used on any other latest internet browsers other than the bad ol’ Internet Explorer, and in this guide I show you my progress on working it out, how to make it works with ALL internet browsers.

There are a few scenarios of HTML5 audio tag, for example, Internet Explorer:

image

 

Firefox:

image

Safari for iPhone:

Google Chrome:

image

 

As you can see, Internet Explorer is a RIP OFF FAIL!!!

 

WHAT YOU ABOUT TO LEARN IS APPLICABLE TO ANY BLOG THAT ALLOW YOU TO EDIT HTML OF CUSTOM HTML WIDGETS!

If you need help on hosting MP3 file or OGG file, contact me on Facebook

Audio Tag

In order to allow the audio player to appear, you need a file URL, at least, OGG file since most browsers support it (Firefox FTW)

<audio src=”http://www.anonoz.com/music/audio/florida-clubcanthandleme.ogg”></audio

This is the most basic configuration, but the player does not come with a control (play/pause) and sometimes, you love it to go autoplay! And, tell the Internet Explorer to “Please change to other browsers!”

So?

<audio src=”http://www.anonoz.com/music/audio/florida-clubcanthandleme.ogg” controls=”controls” autoplay=”autoplay”>Please change to other browsers!</audio>

In the example above, controls and autoplay attributes have been implemented. But now you may want to rectify the error that Safari can’t play OGG, you may want to upload another MP3 file instead.

The next thing to do to fix the error, is to add another file into the roulette, once the player can’t play the first (MP3) file, it will load the second file (OGG) file, they should be the same song right?

<audio controls=”controls” autoplay=“autoplay”>
<source src=”http://www.anonoz.com/music/audio/florida-clubcanthandleme.mp3” type=”audio/mpeg” />
<source src=”http://www.anonoz.com/music/audio/florida/clubcanthandleme.ogg” type=”audio/ogg” />
Please change to other browsers!
</audio>

Remember if you suck in multiple files you need to specify the type, as seen in the example above.

So how to make OGG, you may want to use Audacity as it’s the simplest solution to OGG conversion from MP3.

Any questions? DROP your question below at the comment section!

image

Author: Anonoz Chong

Web Developer in Kuala Lumpur. Computer Science student in MMU Cyberjaya. President of IT Society MMU Cyberjaya. Rubyist.