Zen Audio Player for your Blog

Zen Audio Player Image
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 DemoDownload

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>

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 DemoDownload

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment

Nice tool. It will be handy for music/mp3 or lyric blogs. But not on other blogs because I think it will be annoying for readers.

Ninja Saga said...

It won't because it's not an autoplay tool. You still have to click the button.

rahul said...

handy tool

@Edward Ha | Grand Parkway Emergency Center @rahul @Ninja Saga

Thanks for the positive reviews

Sri Valli said...

Cool player :)

@☂☆ Vållῐ ★♬

Thanks for liking

B.M.K.R said...

I've don't succeed to add this audio player to my website. Please can you give me more tips !!

@PresentationI checked your blog and saw that you had not changed the path of the audio(mp3) file. Go to zen.js and change the paths of m4a ,mp3 and ogg file with a absolute path file this

$(this).jPlayer("setMedia", {
m4a: "http://dl.dropbox.com/u/27675057/simurai-ZEN-Player-2ff8707/audio/song.m4a",
mp3: "http://dl.dropbox.com/u/27675057/simurai-ZEN-Player-2ff8707/audio/song.mp3",
oga: "http://dl.dropbox.com/u/27675057/simurai-ZEN-Player-2ff8707/audio/song.ogg"

Anonymous said...

Sound Colud Is Best Blogger

Ary_Putra said...

information is interesting and I like it.