22 Sep 2011
Zen Audio Player for your Blog

Zen Audio Player a single-song HTML5 Music Player, powered by jPlayer, styled and mostly animated with CSS3. It works more or less in Firefox4, Chrome, Safari, Opera, iOS, but there are some differences in the visuals. This blends jQuery, JavaScript and CSS3 in such a way that the end product is nothing less then a visual masterpiece.There are some known cross browser compatibility issues, but none the less its a funky looking Music Player which shows whats achievable with jQuery and CSS3 alone.

In this tutorial we will be discussing how to add this Music Player into your Blogs.

See Demo Download

Simple Steps for Adding This into your Blog:

1. Go to the Post/Page you want to add this Music Player or

Go to Design > Page Elements > Add a Gadget > HTML/JavaScript type Gadget for adding this in the Sidebar

2. Copy the Following Code: (How to copy code easily)

<link rel="stylesheet" href="http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css">
 <link rel="stylesheet" href="style.css">
 <link rel="stylesheet" href="zen.css">
    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>   
 <script type="text/javascript" src="jquery.rotate.js"></script>
 <script type="text/javascript" src="jquery.grab.js"></script> 
 <script type="text/javascript" src="jquery.jplayer.min.js"></script>
 <script type="text/javascript" src="zen.js"></script>

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!

Note: If you already have jQuery library in your Header, then don't include it again

Here zen.js contains the link of the audio file you want to play through this player. As you may observe that there are three different formats of the same file namely mp3, m4a and ogg. This is done as different Browsers have different native audio supports. Therefore it is suggested that you add the link to different formats of your Music file for better Cross Browser compatibility.

3. Now add the Following HTML markup:

<div id="zen">
  <span class="player"></span>
  <span class="circle"></span>
  <span class="progress"></span>
  <span class="buffer"></span>
  <span class="drag"></span>
  <div class="button">
   <span class="icon play"></span>
   <span class="icon pause"></span>
  </div>
 </div>

This code calls in the different CSS and JavaScript classes to give you the end product a.k.a. a super stylish Music Player.

4. Now just save and enjoy the Music.

See Demo Download

Til next time,
Prayag Verma at 12:06

scribble

22 Sep 2011 Zen Audio Player for your Blog

22 Sep 2011
Zen Audio Player for your Blog