How to Create an Audio Player in jQuery, HTML5 & CSS3

Valeriu Timbuc • Tutorials • April 24, 2012 • 54 Comments

Topic: jQuery / CSS3
Difficulty: Intermediate / Advanced
Estimated Completion Time: 30 mins

Today’s tutorial we will code an Audio Player from Impressionist UI by Vladimir Kudinov. We will code it with CSS3 for the styling and the “MediaElement.js” for the functionality. MediaElement.js is a HTML5 audio and video player that also works for older browsers using Flash and Silverlight to mimic the HTML5 MediaElement API.

Step 1 – Downloading MediaElement.js

First we need to download the “MediaElement.js” script and extract it. Then from the “build” folder we need three files:

flashmediaelement.swf
mediaelement-and-player.min.js
silverlightmediaelement.xap

Then copy all these three files to the same directory, I will copy for my “js” folder.

Step 2 – HTML Markup

Now, we need to link to the jQuery Library, we can host it locally or use the one hosted by Google. Then we need to link to “mediaelement-and-player.min.js” script file and the CSS file. All this three files need to be inside of the <head> tag.

<head>
	<title>Audio Player</title>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="js/mediaelement-and-player.min.js"></script>
	<link rel="stylesheet" href="css/style.css" media="screen">
</head>

To create the player we will add a <div> width the class “audio-player”. This div will be the container for our player elements. Let’s add a <h1> tag for the song title and <img> for the cover. Then we will add the <audio> tag that will link to our song and we’ll also set the id to “audio-player”.

<div class="audio-player">
	<h1>Demo - Preview Song</h1>
	<img class="cover" src="img/cover.png" alt="">
	<audio id="audio-player" src="demo.mp3" type="audio/mp3" controls="controls"></audio>
</div>

To finish we need to add this code before the ending of the </body> tag. Also we need to add the same id as we used in the <audio> tag to load the player. You can set some settings too, for more info read the “MediaElement.js” documentation.

<script>
	$(document).ready(function() {
		$('#audio-player').mediaelementplayer({
			alwaysShowControls: true,
			features: ['playpause','volume','progress'],
			audioVolume: 'horizontal',
			audioWidth: 400,
			audioHeight: 120
		});
	});
</script>

Step 3 – Container Styles

First let’s add some reset styles for all the elements that we will use in the container.

.audio-player,
.audio-player div,
.audio-player h1,
.audio-player a,
.audio-player img,
.audio-player span,
.audio-player button {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

Now let’s style the player container, we will set the width to 400px and height to 120px. We will also add a css3 background gradient and rounded corners.

div.audio-player {
	position: relative;
	width: 400px;
	height: 120px;

	background: #4c4e5a;
	background: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
	background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
	background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
	background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
	background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

Step 4 – Title & Cover

Let’s position the title and cover on the player container and then add some typography styles for the title.

.audio-player h1 {
	position: absolute;
	top: 37px;
	left: 165px;

	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 14px;
	color: #ececec;
	text-shadow: 1px 1px 1px rgba(0,0,0, .5);
}

.audio-player .cover {
	position: absolute;
	top: 0;
	left: 0;
}

Step 5 – Controls Buttons

Now we will style the player controls (play/pause, mute/unmute). To do it we will start by giving some general styles to the buttons and then we’ll set a fixed width and height. We will position the “pause/play” buttons and “mute/unmute” buttons in the same position and they will toggle on click event.

.mejs-controls .mejs-button button {
	cursor: pointer;
	display: block;
	position: absolute;
	text-indent: -9999px;
}

.mejs-controls .mejs-play button,
.mejs-controls .mejs-pause button {
	width: 21px;
	height: 21px;
	top: 35px;
	left: 135px;
	background: transparent url(../img/play-pause.png) 0 0;
}

.mejs-controls .mejs-pause button { background-position:0 -21px; }

.mejs-controls .mejs-mute button,
.mejs-controls .mejs-unmute button {
	width: 14px;
	height: 12px;
	top: 70px;
	left: 140px;
	background: transparent url(../img/mute-unmute.png) 0 0;
}

.mejs-controls .mejs-unmute button { background-position: 0 -12px; }

Step 6 – Volume Slider

To style the volume slider we’ll position it, then we will give a 200px width and 8px height. We also need to set a background color, some shadows and rounded corners.

.mejs-controls div.mejs-horizontal-volume-slider {
	position: absolute;
	top: 71px;
	left: 165px;
	cursor: pointer;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
	width: 200px;
	height: 8px;
	background: #212227;

	-webkit-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
	-moz-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
	box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);

	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

Then we need to style the “current volume”, to do it we’ll add a custom image background, rounded corners, etc.

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
	position: absolute;
	width: 0;
	height: 6px;
	top: 1px;
	left: 1px;
	background: url(../img/volume-bar.png) repeat-x;

	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

Step 7 – Progress Bar

The progress bar styles are almost basics. We will give the same width as the player container (400px) and position it to the bottom. We will also make the left and right corner rounded. Then we will set some background colors for each time state (total, loaded and current). As you may notice we need to set the width to 0 for the loaded and current time and as the song plays or is loaded the width will increase.

.mejs-controls div.mejs-time-rail { width: 400px; }

.mejs-controls .mejs-time-rail span {
	position: absolute;
	display: block;
	width: 400px;
	height: 5px;
	left: 0;
	bottom: 0;
	cursor: pointer;

	-webkit-border-radius: 0px 0px 2px 2px;
	-moz-border-radius: 0px 0px 2px 2px;
	border-radius: 0px 0px 2px 2px;
}

.mejs-controls .mejs-time-rail .mejs-time-total { background: #999999; }

.mejs-controls .mejs-time-rail .mejs-time-loaded {
	width: 0;
	background: #cccccc;
}

.mejs-controls .mejs-time-rail .mejs-time-current {
	width: 0;
	background: #64b44c;
}

Step 8 – Progres & Volume Handle

Now we will add a handle to the progress bar and volume slider. Basically we will only add a background image, set the width / height and position it.

.mejs-controls .mejs-time-rail .mejs-time-handle,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
	position: absolute;
	display: block;
	width: 12px;
	height: 14px;
	top: -4px;
	background: url(../img/handle.png) no-repeat;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle { top: -2px; }

Step 9 – Time Tooltip

To finish the audio player we will add a time tooltip that will appear when we hover over the progress bar. The styles are almost the same as in the other steps, we will position it, add a fixed width/height values and a background image. We will also add some typography styles.

.mejs-controls .mejs-time-rail .mejs-time-float {
	position: absolute;
	display: none;
	width: 33px;
	height: 23px;
	top: -26px;
	margin-left: -17px;
	background: url(../img/time-box.png);
}

.mejs-controls .mejs-time-rail .mejs-time-float-current {
	width: 33px;
	display: block;
	left: 0;
	top: 4px;

	font-family: Helvetica, Arial, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #666666;
	text-align: center;
}

Conclusion

We’ve successfully coded this Audio Player. If you have any question let me know in the comments. Also don’t forget to leave some feedback and share it with your friends. Follow us if you want to be the first to know about the latest tutorials and articles.

On your email was sent a letter

Simply click on the link in the email and you will get access to the hidden content!

There is no information about this email in our database. Please subscribe by clicking on button below.

Your e-mail is not in our database. Subscribe by clicking the button below

I'm already a subscriber

Valeriu Timbuc

Valeriu is a Web Designer / Developer currently living in Lisbon, Portugal. He creates some cool stuff using CSS3 and HTML5. You can follow him on Twitter at @vtimbuc or visit his web site at vtimbuc.net.

54 Comments

Cruz Barcelona Apr 24, 4:52 pm

AWESOME! Do you think this can work on Tumblr?

Reply
+1
- Valeriu Apr 24, 7:15 pm
  
  I think you can, if you have a good web development knowledge.
  Take a look at this link http://www.tumblr.com/docs/en/custom_themes
  
  Reply
  0
Adrian Apr 24, 5:14 pm

Video player tutorial coming next week.

Reply
0
Cruz Barcelona Apr 24, 5:54 pm

This is what I did! Hope you like it guys!
http://cruzbarcelona.com/mp3/

Reply
+1
- Adrian Apr 24, 5:59 pm
  
  Congratulation, good work.
  
  Reply
  0
GRR Apr 24, 8:16 pm

Great stuff, waiting for the video player tut now ;-)

Reply
0
Think360studio Apr 25, 9:24 am

WOW!!!. In very easy method you had given the description of creating the audio player. Now i think i’ll definitely create it in my next website. Thanks for sharing your valuable knowledge and for sharing this article. And i am also very excited to see the video player.

Reply
+1
Chris Apr 26, 12:30 am

That’s awesome. Also can’t wait for the video player tut

Reply
0
Jon Taylor Apr 26, 10:32 am

Fantastic… Could it be modified to play a stream from a shoutcast server too ?

Reply
0
Radio Base Apr 27, 3:23 am

Can we make internet radio player with this tutorial. I want to play all radio streaming formats. How can i do this ?

Reply
0
- Valeriu Apr 27, 3:39 am
  
  Hmm, I don’t know if you can, but try to find some info on MediaElement.js Forums about it.
  
  Reply
  0
Alex Apr 29, 2:59 am

Would this work for a AAC Shoutcast stream, by any chance?

Reply
0
Nick Apr 30, 8:55 pm

Hi Valeriu. Nice tutorial. I tested this player out on an Android phone (HTC Evo running Android version 2.3.3 + HTC Sense skin) and iPhone 4 (running version 4.3.2) and noticed 2 major issues. One, the progress slider did not move during playback and the volume controls did not appear. Just want to give you a heads up. Cheers.

Reply
0
- Valeriu Apr 30, 10:18 pm
  
  Hi Nick, I didn’t checked this player on mobile devices because I don’t own any iOS or Android device :(
  
  Reply
  0
matt May 1, 3:02 am

Looks great! Any plans to add a playlist or ways to make it work with multiple tracks?

Reply
0
- Valeriu May 1, 3:22 pm
  
  Maybe in the future :)
  
  Reply
  0
Steve Lombardi May 1, 3:18 pm

This “tweet” stuff is very annoying. I often tweet your articles because they’re good — forcing me is not cool. And, to top it off, even after tweeting I can’t download!

Reply
0
- Adrian May 1, 3:19 pm
  
  If you have problem with download item, just send me an email :)
  
  Reply
  0
Gianni May 5, 12:29 am

Really Great Tutorial!!! I love it! Which song do you use as demo track? Is it licensed?

Reply
0
- Adrian May 5, 12:35 am
  
  yes, is it from audiojungle.
  
  Reply
  0
Prasannakumar Jun 16, 6:10 am

hi,
i am designing a music player as u said but here we had a chance to play only one song is there a chance that we can play a bulk of songs in order(i.e., single song has to play but with a play list).please give me a solution

Reply
0
abola Jun 29, 1:07 pm

hi

it was good. but have problem with chrome

1.when you run in chrome, your audio must completely loaded and after that you can play.
2.when you open chrome and IE together, chrome comes down to taskbar!!!!!.

can you correct them

thank you very much

Reply
0
Vivianne Aug 1, 3:44 am

Thank you very much for this tutorial!

I’ve implemented on my website. It works, but the audio only starts playing when It’s completely loaded. I’ve tested your demo on the same browser and It doesn’t happen. Do you think I missed something?

Thank you very much.

Reply
0
Ciro Aug 3, 7:04 pm

Please i need autoplay when the page end to load =)

Please

Reply
0
Red Aug 7, 2:51 am

There are no green bars on iphone safari. Will it work on iphone 4s?

Reply
0
Luke S Sep 4, 10:15 pm

I’ve managed to get media element.js working but when the music gets near the end the current bar jumps and doesn’t complete all the way to the end. I haven’t a clue whats going on with it.

I’ve got it uploaded here if it helps out. (its at the bottom)

http://sites.lukespoor.me/mediaelement/blog.html

Reply
0
- Valeriu Sep 4, 11:09 pm
  
  Hi Luke,
  
  I think this issue is caused by the width values or margin/padding. Also you have duplicated css code on your stylesheet. I would recommend you to start the customization again.
  
  Reply
  0
  - Luke s Sep 5, 12:34 am
    
    Hey there, I did originally try from scratch but that didn’t work so I tried your code and just styled to my design. Could you fix my code for me?
    
    Reply
    0
    - Valeriu Sep 5, 1:07 am
      
      Sorry, I have no time to do it. On your stylesheet you have duplicated code (two different width values), you should delete all the player is css and start from scratch with my code. This will be faster that trying to find the issue :)
      
      Reply
      0
      - Luke S Sep 5, 8:16 pm
        
        I’ve tried that. I’ve downloaded your source files and then edited it to my style and it still does not work.
        
        See here: http://sites.lukespoor.me/mediaelement/blog.html
        
        The song finishes before the current time bar reaches the end of the total bar.
        
        Reply
        0
        
        Luke S Sep 5, 9:38 pm
        
        I’ve just sent one, thanks in advance :)
        
        Reply
        0
Brad H Sep 13, 3:40 am

great tutorial but im struggling with multiple instances on the same page first one loads but the second one has no controls

http://www.brad-holmes.co.uk/sites/jameswilliams/index.html

i would really like to use mulltiple players do you now how

Reply
0
Lukii Sep 13, 10:43 am

can you create a tutorial how to play in html 5 shoutcast streams? I like to design my own HTML5 player but i need to now hot to play shoutcast steams live? Thanks

Reply
0
Gianni Oct 3, 2:12 am

What song is used in the demo?

Reply
0
- Adrian Oct 3, 10:28 am
  
  this song is from audiojungle.
  
  Reply
  0
Erika Nov 9, 3:39 am

Worked great for a while, then it just stopped working in FF. Any ideas?

Reply
0
rita Nov 14, 12:14 pm

Really great audio player , but why it’s not working in firefox 16.0.2 ?

Reply
0
- Adrian Nov 14, 12:31 pm
  
  This player working good in firefox 16.0.2, tested.
  
  Reply
  0
rita Nov 16, 9:52 pm

Yeah u r right Adrian it’s working in firefox 16.0.2. But can we have more than one song in the same page??

Thanks for your response

Reply
0
- Torsten Feb 22, 11:11 pm
  
  but the audioplayer is not working on firefox 19 right??
  
  Reply
  0
  - Adrian Feb 22, 11:26 pm
    
    working fine in firefox 19.
    
    Reply
    0
Thijs Dec 1, 8:43 pm

As rita mentioned, I would like to know if I can make more than one audio-player! Please respond asap!

Reply
+1
- Adrian Dec 1, 9:30 pm
  
  You can change player how you love, we offer solution exactly how you see in demo.
  
  Reply
  0
Steph Dec 13, 3:50 am

For those asking how to have multiple players on one page, I got it to work in all browsers –

jQuery cannot target multiple elements with the same ID, so change #audio-player to .audio-player in the jQuery initialization code, i.e.:

$(‘.audio-player’).mediaelementplayer({

Now of course you have to change the HTML output. I personally completely removed the div, and simply changed:

to

Now all the players will work on the same page.

Hope this helped someone!

Reply
0
- Steph Dec 13, 3:51 am
  
  The audio tags got removed in my previous comment (silly me)
  
  But in the HTML change
  
  audio id=”audio-player”
  
  to
  
  audio class=”audio-player”
  
  Reply
  0
Primo Dec 18, 8:05 pm

how do you make it accept playlists,xspf playlists to be specific?basically how do change the source file,so it accepts more files?

Reply
0
Elena Jan 7, 9:05 pm

Does anyone know how we are supposed to do the same thing using wordpress, I have no idea how to add code files to wordpress, it only has a text section that looks like it’s there to fix html. Also, I downloaded the mediaelement.js plugin to wordpress, so do I have to extract files from it and put it somewhere else in wordpress or do I skip steps?

Please Help,
Thank you!!

Reply
0
Dmytro Jan 8, 4:17 pm

Thank you!

One annoing thing — all angle brackets an quote marks in the code now appears as their html codes. Very unreadable.

Reply
0
alami Jan 12, 4:44 pm

not working in Opera

Reply
+1
michel Feb 8, 1:26 pm

hi there all – any idea how to code the audio tag so i have one player in the page and several links to mp3s (returned as result om mysql query) inside an iframe. so when you press ‘play’link on a returned mp3 link it sends it to the player to pley?
cheers
michel

Reply
0
marco Feb 13, 6:57 pm

maybe a stupid question, but:

What do we do with the silverlightmediaelement.xap file?

i didn’t came back after we saved them in the js folder.
..or am i missing something here?

Reply
0
Mert Feb 21, 5:30 pm

please, i need autoplay… how to do it?

Reply
0
James May 4, 2:49 am

Hey, I know this is a year old, hoping for a reply still

On IOS there is does not display properly, there is no track bar or volume bar?

Any help???

Reply
0
coolwoc May 12, 5:02 pm

Amazing tutorial and good starting point for a playlist I want to build! Thanks for this.

I have just notice that the time-handler does not behave correctly with the new jQuery 1.9.1 release. Any suggestion to fix the issue.

Cheers.

Reply
0

How to Create an Audio Player in jQuery, HTML5 & CSS3

Step 1 – Downloading MediaElement.js

Step 2 – HTML Markup

Step 3 – Container Styles

Step 4 – Title & Cover

Step 5 – Controls Buttons

Step 6 – Volume Slider

Step 7 – Progress Bar

Step 8 – Progres & Volume Handle

Step 9 – Time Tooltip

Conclusion

Subscribe to Download

Enter the e-mail, which was subscribed

On your email was sent a letter

There is no information about this email in our database. Please subscribe by clicking on button below.

Related Posts

Cruz Barcelona Apr 24, 4:52 pm

Valeriu Apr 24, 7:15 pm

Adrian Apr 24, 5:14 pm

Cruz Barcelona Apr 24, 5:54 pm

Adrian Apr 24, 5:59 pm

GRR Apr 24, 8:16 pm

Think360studio Apr 25, 9:24 am

Chris Apr 26, 12:30 am

Jon Taylor Apr 26, 10:32 am

Radio Base Apr 27, 3:23 am

Valeriu Apr 27, 3:39 am

Alex Apr 29, 2:59 am

Nick Apr 30, 8:55 pm

Valeriu Apr 30, 10:18 pm

matt May 1, 3:02 am

Valeriu May 1, 3:22 pm

Steve Lombardi May 1, 3:18 pm

Adrian May 1, 3:19 pm

Gianni May 5, 12:29 am

Adrian May 5, 12:35 am

Prasannakumar Jun 16, 6:10 am

abola Jun 29, 1:07 pm

Vivianne Aug 1, 3:44 am

Ciro Aug 3, 7:04 pm

Red Aug 7, 2:51 am

Luke S Sep 4, 10:15 pm

Valeriu Sep 4, 11:09 pm

Luke s Sep 5, 12:34 am

Valeriu Sep 5, 1:07 am

Luke S Sep 5, 8:16 pm

Luke S Sep 5, 9:38 pm

Brad H Sep 13, 3:40 am

Lukii Sep 13, 10:43 am

Gianni Oct 3, 2:12 am

Adrian Oct 3, 10:28 am

Erika Nov 9, 3:39 am

rita Nov 14, 12:14 pm

Adrian Nov 14, 12:31 pm

rita Nov 16, 9:52 pm

Torsten Feb 22, 11:11 pm

Adrian Feb 22, 11:26 pm

Thijs Dec 1, 8:43 pm

Adrian Dec 1, 9:30 pm

Steph Dec 13, 3:50 am

Steph Dec 13, 3:51 am

Primo Dec 18, 8:05 pm

Elena Jan 7, 9:05 pm

Dmytro Jan 8, 4:17 pm

alami Jan 12, 4:44 pm

michel Feb 8, 1:26 pm

marco Feb 13, 6:57 pm

Mert Feb 21, 5:30 pm

James May 4, 2:49 am

coolwoc May 12, 5:02 pm

Leave a Reply Cancel Reply

Top Selling ProductsShow more

Newsletter

Sponsors

Popular Posts (Month)

Latest Tutorials