2016 June 30 Archive - EXEIdeas – Let's Your Mind Rock

audio.js is a drop-in javascript library that allows HTML5’s tag to be used anywhere. It uses native 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 http://kolber.github.io/audiojs/ 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.CLICK HERE TO SEE DEMOFeatures: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.CSS: 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: JQuery Code: $(function() {// Setup the player to autoplay the next trackvar a = audiojs.createAll({trackEnded: function() {var next = $('ol li.playing').next();if (!next.length) next = $('ol li').first();next.addClass('playing').siblings().removeClass('playing');audio.load($('a', next).attr('data-src'));audio.play();}});// Load in the first trackvar audio = a[0];first = $('ol a').attr('data-src');$('ol li').first().addClass('playing');audio.load(first);// Load in a track on click$('ol li').click(function(e) {e.preventDefault();$(this).addClass('playing').siblings().removeClass('playing');audio.load($('a', this).attr('data-src'));audio.play();});// Keyboard shortcuts$(document).keydown(function(e) {var unicode = e.charCode ? e.charCode : e.keyCode;// right arrowif (unicode == 39) {var next = $('li.playing').next();if (!next.length) next = $('ol li').first();next.click();// back arrow} else if (unicode == 37) {var prev = $('li.playing').prev();if (!prev.length) prev = $('ol li').last();prev.click();// spacebar} else if (unicode == 32) {audio.playPause();}})}); HTML: dead wrong intro juicy-r it's all about the crystalizabeths islands is the limit one more chance for a heart to skip a beat suicidal fantasy everyday shelter basic hypnosis infinite victory the curious incident of big poppa in the nighttime mo stars mo problems Keyboard shortcuts: &rarr; Next track

&larr; Previous track

Space Play/pause

Customization:1.) You can change the Codes if your are a Pro. Rest can ask for customization.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…