Create music player

Using jPlayer’s circle player I created a random music player. Here is the jQuery code

$(document).ready(function(){
var currentSong;

var songlists = new Array();
songlists[0] = “/Audio/preciosa.mp3”;
songlists[1] = “/Audio/ElComejen.mp3”;
songlists[2] = “/Audio/rvdancingmoon.mp3”;
var random = Math.ceil(Math.random() * songlists.length) – 1;
currentSong = songlists

no images were found

;

var myCirclePlayer = new CirclePlayer(“#jquery_jplayer_1”,
{
mp3: currentSong

}, {
playlistOptions: {
enableRemoveControls: true
},
cssSelectorAncestor: “#cp_container_1”,
swfPath: “js”,
supplied: “mp3”
});

});

Here is the html code
<div id="jquery_jplayer_1"></div>
<div> <!-- A wrapper to emulate use in a webpage and center align --><!-- The container for the interface can go where you want to display it. Show and hide it as you need. -->
<div id="cp_container_1">
<div> <!-- .cp-gt50 only needed when buffer is > than 50% -->
<div></div>
<div></div></div>
<div> <!-- .cp-gt50 only needed when progress is > than 50% -->
<div></div>
<div></div></div>
<div></div>
<ul>
<li><a tabindex="0"></a></li>
<li><a tabindex="0"></a></li> <!-- Needs the inline style here, or jQuery.show() uses display:inline instead of display:block -->
</ul></div></div></div>

You reference the three js files


<script type="text/javascript" src="js/jquery.jplayer.js"></script>
<script src="js/circle.player.js" type="text/javascript"></script>
<script src="js/Audioplayer.js" type="text/javascript"></script>

Writing your first jQuery function.

With my first tutorial I am going to show you how to make your first jQuery function from beginning to end.
For those who want to learn jQuery I am glad to help you out.
First things first. Lets get jQuery working on your site. You can download the jQuery library and have it hosted locally or you can point to the jQuery library from an external site. I call an external site.  I use
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>. This is placed in between the <head> section of your site. So it looks like this…

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
</head>
...
...
</html>

Now that our website is now calling in the jQuery library lets create our first function.
Take out your favorite html editor. Mine is Notepad ++. It has so many options and allow for snippets and plugins, plus it allows to save in so many different languages.
Create a new file and lets start creating your function.
Type in…


$(document).ready(function(){

});

What this does is tell the client to wait for the document to be ready before executing your function.

Now we need something to code against. So on your page create an button with a class name of test.

<button class="test" >Test</button>

Now we code against the test class.
in between

$(document).ready(function(){

});

type in


$(".test").click(function(){
alert("Hello World!!!");
});

So your code will look like this…


$(document).ready(function(){
$(".test").click(function(){
alert("Hello World!!!");
});
});

Now save it as myfirstjs.js and call it in your website at the end of the page before </body>

<script type="text/javascript" src="myfirstjs.js"></script>

When you click on your button you should get a messagebox that says Hello World!!!.
If you didn’t verify that the location of myfirstjs.js is in the same as your html file.
If it is in another folder just change the src to src=”foldername/myfirstjs.js” where foldername is the name of the location it is in.
Please leave me a comment if you have any questions or comments.
Thank you for checking out my first tutorial.