Jezra.net: hello HTML 5! a simple audio player

2009-08-07

I've been fairly excited about the "audio" and "video" tags in the upcoming HTML5. Yes, I said excited.

Currently, to play and control audio on a webpage, one needs to use a browser plugin to control the audio. For the most part, this means the flash player. Oh flash, how I loath thee; thou art buggy and sucketh mine resources. Visiting a web page with multiple instances of embedded flash can bring my browser to crashing halt. Fortunately, the future looks illuminated. Although I was tempted to say the future looks bright, Apple has clouded the sun and dimmed things a bit. Oh well, I'm still happy because in the specification for the new HTML 5 standard is a tag for including an audio file directly in a web page.

Instead of having a few unreadable lines of code to embed a flash player in a page and thus requiring the end user to have the flash plugin installed, one will only need a simple line of code such as

<audio src="path/to/audio/file"controls="true"></audio>

Oh happy day!

Fortunately, the fun doesn't stop there. Since the audio or video is now a part of the web page, the media can be accessed and manipulated through javascript. This will allow developers to create fancy web based audio and video players that use nothing more that JavaScript, HTML and CSS. To illuminate what I mean, I've created a very simple HTML 5 audio player example. Since the HTML 5 standard has yet to be finalized and few browsers comply with the coming specification, the example will probably only work properly with Firefox 3.5.

Thank You HTML 5; I look forward to an internet with much less Flash and much more functionality.

hello HTML 5! a simple audio player from jezra.net

Comments

2009-08-10 Windigo:

Here here!

I can't wait until HTML 5 gains enough of a foothold to start being involved in the majority of the web. It gives us so many more options, so much leeway, with what we're able to do in the browser with Free technologies and standardized code.

I'm betting that the browsers that support all of HTML 5, like Firefox and (possibly) Opera for example, will see their market share rise as well. When cool web apps hit the stage that take advantage of the advances in HTML 5, it might be the final push people need to upgrade.

2011-05-07 xaccrocheur:

Wow, Jezra, your PagePlayer is wonderful. I've been looking everywhere (I mean it) for a good, lucid, and free html5 audio playlist implementation, and yours is rock-solid, and using very little code.

The only minor gripe I have is in the logic of substituting HTML elements on the fly with JScript, rendering the whole process a bit abstract (and I hear that innerHTML is proprietary)..?

I have two questions :

-Given that your script is expecting <li></li> elements and turns them into a list of divs, how would one do to present the song entries in a tabular manner ? You see, in order to display the duration, the encoding, the download and sharing links and all that stuff, on one line, forming neat columns, and then stay clean when JavaScript is disabled ?

I'd like to merge your very simple example with the load/unload logic of PagePlayer, bypassing the substitution, using only named <span> tags into whatever container the user would want, in this case <table> elements. (Of course the resulting work will be GPL'd)

-Do you know anyway to play audio in an HTML5 page (*using* HTML5 audio) with JScript disabled ?

Phil

2011-05-07 xaccrocheur:

Jezra wait.

1-My formulations are unclear, leaving you a lot too much of work figuring out what exactly I mean. Sorry about that.

2-I got it. I'm going to use your "description_div" to display everything related to the song currently playing. It's elegant, compact, semantically correct, I like it. What I like too, is the idea of *not* touching your code at all, thus easing maintainance.

2011-05-07 jezra:

If javascript is disabled, the <audio> tag will still work; assuming that the browser supports the <audio> tag.

2011-05-09 xaccrocheur:

I'd like to be able to play one given song at pageLoad, is there a built-in way of doing this ; you provided a way to pass variables to plagePlayer, is there a way to do something like "song_to_play=N" ?

2011-05-09 xaccrocheur:

Never mind, I found out. I just pass the index of the song to play to "load_track(index)" in the body onload, and use playAudio() right after that. Sorry for being such a self-teaching teddy-bear.

On a side note, do you know why your code is incompatible with jquery ? I tried it down to a single script call in the header of PagePlayer.html demo page, and it breaks the player right away..?

2011-05-09 jezra:

it probably has to do with the "$()" function being referenced multiple times. Once in PagePlayer and once in jquery

Name:		not required
Email:		not required (will not be displayed)
Website:		not required (will link your name to your site)
Comment:		required Please do not post HTML code or bbcode unless you want it to show up as code in your post. (or if you are a blog spammer, in which case, you probably aren't reading this anyway).
Prove you are human by solving a math problem! I'm sorry, but due to an increase of blog spam, I've had to implement a CAPTCHA.
Problem:	1 plus 2
Answer:		required