Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » HTML Codes / HTML-CSS-PHP-JavaScript / JavaScript Codes » HTML5 Audio Player With Playlist For Web And Blog

HTML5 Audio Player With Playlist For Web And Blog

audio.js is a drop-in javascript library that allows HTML5’s <audio> tag to be used anywhere. It uses native </audio><audio> where available and falls back to an invisible flash player to emulate it for other browsers. It also serves a consistent html player UI to all browsers which can be styled used standard css. It plays mp3s. No ogg. Because, lets be honest, in the real world, no one really exports ogg files. Sadly, that means Opera and Firefox get flash audio. Hopefully they can add mp3 support soon.

This code is designed by So here we have HTML5 Audio PLayer With Playlist For Web And Blog that look awesome using pure HTML5 tag only. You can add your desired songs also and can change name etc so check out our live DEMO and then gar the code from below and use it.


1.) JQuery File Added.
2.) JavaScript Code Added.
3.) CSS Added.
4.) Simple And Fast Loading Widget.
5.) Can Work With Any Browser.

How To Add In A WebPage OR Blog?

1.) Just Go To Your “Web Page File” or “Blog”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.

Recommended For You:
Check/Uncheck All HTML Checkbox Tags Using JavaScript On Click


a { color: #888; text-decoration: none; }
#wrapper { width: 400px; margin: 40px auto; }
ol { padding: 0px; margin: 0px; list-style: decimal-leading-zero inside; color: #ccc; width: 460px; border-top: 1px solid #ccc; font-size: 0.9em; }
ol li { position: relative; margin: 0px; padding: 9px 2px 10px; border-bottom: 1px solid #ccc; cursor: pointer; }
ol li a { display: block; text-indent: -3.3ex; padding: 0px 0px 0px 20px; }
li.playing { color: #aaa; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); }
li.playing a { color: #000; }
li.playing:before { content: '&#9836;'; width: 14px; height: 14px; padding: 3px; line-height: 14px; margin: 0px; position: absolute; left: -24px; top: 9px; color: #000; font-size: 13px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); }
#shortcuts { position: fixed; bottom: 0px; width: 100%; color: #666; font-size: 0.9em; margin: 60px 0px 0px; padding: 20px 20px 15px; background: #f3f3f3; background: rgba(240, 240, 240, 0.7); }
#shortcuts div { width: 460px; margin: 0px auto; }
#shortcuts h1 { margin: 0px 0px 6px; }
#shortcuts p { margin: 0px 0px 18px; }
#shortcuts em { font-style: normal; background: #d3d3d3; padding: 3px 9px; position: relative; left: -3px;
-webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -o-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }
@media screen and (max-device-width: 480px) {
#wrapper { position: relative; left: -3%; }
#shortcuts { display: none; }

External Files:

<script src=""></script>
<script src=""></script>

JQuery Code:

$(function() {
// Setup the player to autoplay the next track
var a = audiojs.createAll({
trackEnded: function() {
var next = $('ol li.playing').next();
if (!next.length) next = $('ol li').first();
audio.load($('a', next).attr('data-src'));;
// Load in the first track
var audio = a[0];
first = $('ol a').attr('data-src');
$('ol li').first().addClass('playing');
// Load in a track on click
$('ol li').click(function(e) {
audio.load($('a', this).attr('data-src'));;
// Keyboard shortcuts
$(document).keydown(function(e) {
var unicode = e.charCode ? e.charCode : e.keyCode;
// right arrow
if (unicode == 39) {
var next = $('li.playing').next();
if (!next.length) next = $('ol li').first();;
// back arrow
} else if (unicode == 37) {
var prev = $('li.playing').prev();
if (!prev.length) prev = $('ol li').last();;
// spacebar
} else if (unicode == 32) {


<div id="wrapper">
<audio preload></audio>
<li><a href="#" data-src="">dead wrong intro</a></li>
<li><a href="#" data-src="">juicy-r</a></li>
<li><a href="#" data-src="">it's all about the crystalizabeths</a></li>
<li><a href="#" data-src="">islands is the limit</a></li>
<li><a href="#" data-src="">one more chance for a heart to skip a beat</a></li>
<li><a href="#" data-src="">suicidal fantasy</a></li>
<li><a href="#" data-src="">everyday shelter</a></li>
<li><a href="#" data-src="">basic hypnosis</a></li>
<li><a href="#" data-src="">infinite victory</a></li>
<li><a href="#" data-src="">the curious incident of big poppa in the nighttime</a></li>
<li><a href="#" data-src="">mo stars mo problems</a></li>
<div id="shortcuts">
<h1>Keyboard shortcuts:</h1>
<p><em>&rarr;</em> Next track</p>
<p><em>&larr;</em> Previous track</p>
<p><em>Space</em> Play/pause</p>


1.) You can change the Codes if your are a Pro. Rest can ask for customization.

Recommended For You:
How To Validate/Identify Deprecated HTML Tags In A WebPage Using PHP?

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…


You Like It, Please Share This Recipe With Your Friends Using...

8 Responses to “HTML5 Audio Player With Playlist For Web And Blog”

  1. Do any of these support Icecast streams? I already have a stream, but don’t want to set up an additional RTMP server. Flash is buggy for streaming, and being phased out of mobile devices. HTML5 doesn’t seem to be able to pick up a stream url without an additional media server.

    • EXEIdeas says:

      Welcome here and thanks for reading our article and sharing your views. We will also look for streaming videos and will share it.

  2. Communiqua says:

    Awesome education blog. I was searched this topic. Finally I got the information in this blog. Thanks for sharing this information.

  3. Merry Christmass and happy new years .
    my name is Nikolas i wan to help me how to embed all this codes to my blogger with list.
    please an you help please
    thanks for all

    Happy new Year thanks for your answer , my problem is i dont know how tp put thoes different codes to my blogger ,
    sorry i dont know many thinks.
    i will be happy if you can help me.

    • EXEIdeas says:

      Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you more awesome and valuable content from a different mind. Thanks again.

Leave a Reply

Your email address will not be published. Required fields are marked *