Main Menu

Web Design: How to Create A Sleek Web Audio Player

I still remember in the early 2000s when playing rich media (audio and video) online came with a lot of constraints. It’s easy to take the beginnings for granted, especially since today, we have many outlets to play audio i.e. last.fm or play video such as Youtube.

In this post, as the title implies, we are going to create Web Audio Player. If you are running a website for podcasting and want to create a media player that will suit your overall web design, this post is probably for you.

jPlayer is essentially a jQuery plugin, thus we also need to download the jQuery for it to work, and at the time of the writing jQuery is currently at version 1.8.2. We also need some icons for the media player GUI, and this time we will be using FontAwesome to deliver the icons.

After that, we extract all the downloaded files and put all the stuff, including the jPlayer files, the jQuery and the Fonts in an appropriate folder. Then link jquery.js and jquery.jplayer.min.js to the html document, as follow.

As you can see, in addition to jQuery and jPlayer library, we’ve also linked two CSS files in there. The first one normalize.css will reset or normalize the browser’s styles, so our web page will be rendered more consistently across the browsers, whilst the second one, style.css is where we put our main styles.

Structuring the HTML markup

Now, it’s time to structure the HTML markup for the audio player and below are the HTML markup we need. The important thing from this markup is the id=jquery_jplayer_1 attribute that is assigned in the div that contains all these. This id is used to link this structure to jPlayer later on through jQuery function.

Furthermore, all the classes assigned on the following structure, including jp-play, jp-pause, jp-mute and jp-unmute are all the standard classes used in jPlayer. I suggest that you don’t change these classes as well as the id attribute to make things easier for when we style the audio player later on (unless you really know what you are doing).

If you take a closer look at this HTML structure, you will find the following characters &#61515;, &#61516;, &#61480; and &#61478;. These characters are special HTML numbers to refer and render the icon characters that come from FontAwesome.

Activating the Audio Player

Next, once the HTML markup has been cleared up, we simply need to activate the player with the following script. In this script we provide the audio sources and as you can see below, we have added two sources, mp3 and oga. The oga format will extend cross browser compatibility, especially in Firefox and Opera.

GUI Container

The audio player GUI is contained within a div assigned with jp-gui class. You can see in the above screenshot how our media player will look like. We apply gradient colors for the GUI theme and we use this color number for the starting color #f34927, and #dd3311 for the end color. Also, make sure that the position property for this div is defined to relative.

GUI Control

The GUI control section contains UI the control the audio, such as the play and pause button, the volume and mute button. in this section, we set the font-family property to FontAwesome, and turn the text color to white as well as add the text shadow.

Play and Pause Button

For the play and pause as well as the volume button, we we will set their position to absolute, that is why we set .jp-gui to relative previously. So, the position of these buttons will be relative to their closer parent rather than the browser window.