Web Design: How To Create A Sleek Web Audio Player Back
- <link rel="stylesheet" href="css/normalize.css">
- <link type="text/css" href="css/style.css" rel="stylesheet" />
- <script type="text/javascript" src="js/jquery.js"></script>
- <script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
- <div id="jquery_jplayer_1" class="jp-jplayer"></div>
- <div id="jp_container_1" class="jp-audio">
- <div class="jp-type-single">
- <div class="jp-title">
- <ul>
- <li>TEDxPhoenix - Kelli Anderson - Disruptive Wonder for a Change</li>
- </ul>
- </div>
- <div class="jp-gui jp-interface">
- <ul class="jp-controls">
- <li><a href="javascript:;" class="jp-play" tabindex="1"></a></li>
- <li><a href="javascript:;" class="jp-pause" tabindex="1"></a></li>
- <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute"></a></li>
- <li><a href="javascript:;" class="jp-unmute" tabindex
Referral Url : Click
- Indian M&E industry seen growing 11.8% in 2013, touch Rs 917 billion
- How 8 Ball Pool Flash Game Reached 18 Million Monthly Players In Two Years
- Good Personal Qualities: List of Personal Qualities for Resumes
- 10 Infographics That Will Teach You About Typography
- Incredible Wildlife Photography
- Paper art cooks up a creative feast for the eyes
- The top 20 graphic design trends of 2012
- How to make UVs in UVLayout
- 10 Tips for Improving Your Flower Photos
- 25 Most Beautiful Animals Photography
- What to put in your cover letter/CV plus other qualities employers want...
- Adobe Lightroom: how to speed up your workflow with the Quick Develop tools
- 20 Top web design and development trends for 2013
- Tutorial: Creating 3D Graphs in After Effects by Joe Mason
- Impossible photos of Erik Johansson

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 manyoutlets 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.
Here is how our audio player is going to be look like, as inspired from this design at Dribbble.
Recommended Reading: HTML5 Videos: 10 Things Designers Need To Know
What We Need
Before we create the audio player, we need to prepare some key items for it: the jPlayer, jQueryand a font icon set called FontAwesome.
First of all, let’s download the jPlayer. The jPlayer is a jQuery Plugin that allows us to run rich media on our web page without a hassle. As long as you can HTML and CSS you are ready to go.
Recommended Reading: Check out our HTML/CSS3 tutorials.
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.
The Audio
For demonstration in this tutorial, we are going to use the audio from Kelli Anderson from her presentaion at TEDx Pheonix. Well, it is actually a video, but you can extract the audio only either through one of the following tools, Easy Youtube Downloader (FF Extension) or KeepVid.com.
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).
Tweet |
|
Next |