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

	<!-- Audio Player CSS & Scripts -->
	<script src=""></script>
	<script src="js/mediaelement-and-player.min.js"></script>
	<link rel="stylesheet" href="css/style.css" media="screen">
	<!-- end Audio Player CSS & Scripts -->

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

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

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.

		$(document).ready(function() {
				alwaysShowControls: true,
				features: ['playpause','volume','progress'],
				audioVolume: 'horizontal',
				audioWidth: 400,
				audioHeight: 120

Step 3 – Container Styles

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

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


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.


Download Audio Player


  1. Jon Taylor Apr 26, 10:32 am

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

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

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

  3. Alex Apr 29, 2:59 am

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

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

    • 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 :(

  5. matt May 1, 3:02 am

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

  6. Prasannakumar Jun 16, 6:10 am

    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

  7. abola Jun 29, 1:07 pm


    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

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

  9. Ciro Aug 3, 7:04 pm

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


  10. Red Aug 7, 2:51 am

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

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

  12. Gianni Oct 3, 2:12 am

    What song is used in the demo?

  13. Erika Nov 9, 3:39 am

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

  14. rita Nov 14, 12:14 pm

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

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

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

    • Adrian Dec 1, 9:30 pm

      You can change player how you love, we offer solution exactly how you see in demo.

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


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


    Now all the players will work on the same page.

    Hope this helped someone!

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


      audio class=”audio-player”

      • hey Oct 7, 9:24 pm

        Don’t know if you ever reply, but I cant get this work. I’m trying to have two players working o n the same page and it’s just not loading once I applied the changes you asked.

    • 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…

      • Jay Nov 19, 1:28 pm

        Change the audio id in the js to a class like so

        Change the id in the html to a class, **Continued Below**

        • Jay Nov 19, 1:29 pm

          Change the parent class to “audio-playerdiv” go to your css, rename the parent div previously named .audio-player to .audio-playerdiv

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

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

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

  21. alami Jan 12, 4:44 pm

    not working in Opera

    • Daniel Mar 7, 4:23 pm

      Opera did not handle HTML5 audio properly until an update a few days ago (March 2018).

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

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

  24. Mert Feb 21, 5:30 pm

    please, i need autoplay… how to do it?

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

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


  27. angelo May 25, 12:14 am

    hello, are you able to do the autoplay? would you tell me how?

  28. Federico Jul 1, 4:21 pm

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

    thank you, cheers.

  29. Rodolphe Aug 16, 9:13 pm

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

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

  31. Syntafin Sep 8, 6:04 pm

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

  32. kader Sep 23, 5:26 pm


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

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

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

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

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

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

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

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

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

  41. jane_doe Mar 15, 9:18 pm


    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.

  42. DJ Danni Apr 8, 11:54 pm

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

  43. Jens May 20, 11:32 pm

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

  44. Penny Aug 5, 6:49 pm


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

  45. freebee Sep 10, 1:06 pm

    hi there all – I searched this on the web….Hope it can help someone~

  46. Miguel Rodriguez Sep 22, 4:21 am


    Someone can help me?

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

    • Jay Nov 19, 1:50 pm

      Download the tutorial and use his own version of “mediaelement-and-player.min.js”

  47. Mind Doctors Feb 16, 8:14 am

    Hey guys,
    I found a way to have a playlist going.

    here’s the javascript for it:
    function loadNextSong(){
    document.getElementById(‘audio-player’).autoPlay = ‘true’;
    document.getElementById(‘audio-player’).src = ‘nextSong.mp3’;

    and on the audio tag add:

    o it looks like this:

    Hope it help ;)

  48. fredrick Mar 13, 2:56 pm

    Thanks , the code is works very well, i wanted to know if i can fetch live streaming from a url link and play it on the audio player

  49. Ulf Sep 24, 12:53 am

    Hi, great tutorial! Thank you! However, when I add the code


    $(document).ready(function() {
    alwaysShowControls: true,
    features: [‘playpause’,’volume’,’progress’],
    audioVolume: ‘horizontal’,
    audioWidth: 400,
    audioHeight: 120

    I always get in the preview this message:

    Use Up/Down Arrow keys to increase or decrease volume.

    you guys have any idea?

  50. Ulf Sep 24, 10:37 pm

    ah now i got it, the jquery url i used was a different….

  51. Brent Mason May 31, 10:30 pm

    I see this question has been asked before, but I don’t see any answer. The volume and progress bars do not appear to work in iOS. Is there a fix for this?

Leave a Reply

* Minimum length: 20 characters