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

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”.

Are you looking for WordPress Theme?

Get Startup Framework for WordPress now!

<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.

Preview

Subscribe to Unlock

Subscribe to our newsletter to get access to this content. Your email will not be sold/rented. Unsubscribe at any time.
- required fields

Enter the e-mail, which was subscribed

After that, the content becomes available again!
- fields are mandatory

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

Impressionist UI - User Interface Pack

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

Newsletter

75 Comments
  1. Cruz Barcelona Apr 24, 4:52 pm

    AWESOME! Do you think this can work on Tumblr?

    Reply
    +2
  2. Adrian Apr 24, 5:14 pm

    Video player tutorial coming next week.

    Reply
    0
  3. Cruz Barcelona Apr 24, 5:54 pm

    This is what I did!

    Reply
    +5
  4. GRR Apr 24, 8:16 pm

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

    Reply
    0
  5. 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
  6. Chris Apr 26, 12:30 am

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

    Reply
    0
  7. Jon Taylor Apr 26, 10:32 am

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

    Reply
    +5
  8. 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
  9. Alex Apr 29, 2:59 am

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

    Reply
    +4
  10. 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
  11. matt May 1, 3:02 am

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

    Reply
    +2
  12. 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
    +1
    • Adrian May 1, 3:19 pm

      If you have problem with download item, just send me an email :)

      Reply
      0
  13. 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
  14. 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
  15. 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
  16. 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
  17. Ciro Aug 3, 7:04 pm

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

    Please

    Reply
    +2
  18. Red Aug 7, 2:51 am

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

    Reply
    0
  19. 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
  20. 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
    +1
  21. Gianni Oct 3, 2:12 am

    What song is used in the demo?

    Reply
    0
  22. Erika Nov 9, 3:39 am

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

    Reply
    0
  23. rita Nov 14, 12:14 pm

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

    Reply
    0
  24. 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
  25. 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
  26. 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
    • Sainjampong Sep 12, 6:07 pm

      Can you be more detailed.. where to edit.. or can you just send me the file… of the multiple player in 1 html…
      TYA..

      Reply
      0
  27. 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
  28. 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
  29. 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
  30. alami Jan 12, 4:44 pm

    not working in Opera

    Reply
    +1
  31. 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
  32. 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
  33. Mert Feb 21, 5:30 pm

    please, i need autoplay… how to do it?

    Reply
    +3
  34. 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
  35. 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
  36. Federico Jul 1, 4:21 pm

    Great job, is there a way to make an autoplay?

    thank you, cheers.

    Reply
    0
  37. Rodolphe Aug 16, 9:13 pm

    Amazing tut ! But, i’ve a question, is it possible to make a vertical volume slider ?

    Reply
    0
  38. valem Aug 28, 4:54 pm

    how should I set the parameters in the player to play an AAC audio stream?. I searched this on the web and I can´t find

    Reply
    0
  39. Syntafin Sep 8, 6:04 pm

    Did not switch to flash when browser did not support HTML5…
    How I can fix that?

    Reply
    0
  40. kader Sep 23, 5:26 pm

    Hi

    i test this tuto in Firefox, and IE it works fine, but not in chrome?

    Reply
    0
  41. bodunde Sep 24, 2:14 am

    I downloaded your sample and everything worked fine except the progress bar, it doesn’t move. Please do you know what’s wrong? Could the version of my jquery be the cause, pls I need ur help, reply me through my email or on here. Thanks

    Reply
    0
  42. daniel Oct 25, 3:02 am

    excellent work but i tried it on IE7 nd 8 and it didn’t support it…pls any fix for this?

    Reply
    0
  43. Klo DJ Nov 3, 10:06 pm

    Hi Valeriu,

    It’s definitely very helpful and I wanted to thank you! Also I was wandering how to add a loading image/gif at the place of playing image before the song starts.. :)

    I’m trying to integrate it with a url of a radio streaming and it takes some time for the connection or the mp3 files to load.. and you know.. people may think that there is no music to hear ..until it loads of course. So please if you can help me integrate also a gif image for the loading.. effect Not only me but I think everyone would appreciate it :)

    Thanks again for this tutorial… it really fantastic!
    Klo DJ

    Reply
    0
  44. Upadesh Nov 18, 7:11 pm

    Thanks a million for such a great tutorial. I was so stuck on the Muses but with this tutorial looks of my radio player is completely changed.

    Reply
    0
  45. Paul Nov 25, 10:20 am

    I’m enjoying tweeking the css to create my own player graphic! It’s much thinner now but I would like move the progress bar up about 10 px but I can’t tell from the css how to do that. It only says bottom: 0 as a parameter. Can you help me on that?

    Reply
    0
  46. Suraj Dec 9, 10:23 am

    hello bro i had already player but i wann fix it when i reload page the song must be play did not stop

    Reply
    0
  47. NMS Dec 28, 7:28 pm

    Write your demo preview is working fine in Firefox but when i implemented same and try to run in Firefox, its not running but running fine in IE & Chrome.

    May i know any thing is missing in this tutorial for running it in Firefox.

    Reply
    0
  48. Misha Jan 27, 5:50 am

    Great player. I do have some issues going on though. I am noticing that some of the images you used are coming up like the play button the mute buttom etc. Was I supposed to download them from somewhere?

    Reply
    0
  49. jane_doe Mar 15, 9:18 pm

    Hello!

    I like how you’ve explained all the steps so carefully.

    I want to know if this tutorial applies in my situation. I want to embed a player.swf, i already have the flashvars value link. Do i still have to download mediaelement.js? I can’t figure out what steps would change if i were to code it for my project.

    Reply
    0
  50. DJ Danni Apr 8, 11:54 pm

    Is ti possible to do so it play’s rtmp files? If so how?

    Reply
    0
  51. Jens May 20, 11:32 pm

    Thats a great tool, but how can i play radio streams in the m3u-format ?

    Reply
    0
  52. Penny Aug 5, 6:49 pm

    Hello,

    Is there a way where you can add multiple tracks to the audio player and choose what songs you want to play?

    Reply
    0
  53. freebee Sep 10, 1:06 pm

    hi there all – I searched this on the web….Hope it can help someone~
    https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

    Reply
    0
  54. Miguel Rodriguez Sep 22, 4:21 am

    hi

    Someone can help me?

    I do not understand how to configure the styles, I stay in step three.
    thank you very much

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters