| OR |
« Video Converter 101 – Embedding Videos In Webpage | How To Sell Video Tutorials Online »
|
If you’re a D-I-Y website owner with a drive to try out new developments as they happen on the web, you must be familiar with jQuery, “The Write Less, Do More, JavaScript Library.”
There are quite a few web design tutorials in this blog on some amazing jQuery effects, notably the ones below:
In this article we’ll see the use of yet another useful jQuery script, this time for an mp3 playlist creator. The script, drPlayer, is available for free download.
If you’re interested in simply having an mp3 audio in your website, visit my earlier article on 2 easy ways to embed podcast player in your WordPress blog. Also check out how to embed an audio clip in PowerPoint 2010.
Ok, let’s take a look at the following MP3 playlist created with the jQuery script. Click the play buttons to listen to the audios. You can also click the other links to control the audios. The audios, if not stopped, play automatically one after the other till the last one is reached. When an audio plays, a small slider shows up on the right just below the time span figure for each audio. The slider increases or decreases the volume of the audio being played.
The following video demonstrates the ways to use the free jQuery script for designing the mp3 playlist, and also to embed the code in any webpage. The steps are described thereafter following which the full HTML code is given for your use.
Steps For Embedding MP3 Playlist Creator
- Download drPlayer, the free jQuery plugin for creating an mp3 playlist on your computer.
- Unzip it, and check out the ‘index.html’ file for a feel of how it works.
- Upload the necessary files on to your web server along with the mp3 files. To make the mp3 playlist creator work, the files needed are the 2 images, play.gif & pause.gif, the 3 ‘drplayer’ files, the CSS, the JavaScript, and the SWF, the last-named for the audio player, and finally the abbreviated jQuery file.
- Copy the following HTML code and paste it in a notepad. Make corrections in the code as needed, especially the path to the respective files.
- Upload the final HTML file on to your web server. It will now show the mp3 playlist as above, where you can now play them.
As you can see in the following image, the slider on the right is for controlling the volume of the mp3 being played. There are also the Play, Pause, Prev, and Next links below the playlist to control the playing of the mp3 audios. You can omit these links altogether, or shift them on top of the playlist.
HTML Code
The full HTML code is given below. You may copy it for use in your website. Remember to change the file-names and their paths suitably.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="Stylesheet" href="drplayer.css" type="text/css" />
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="drplayer.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#playlist").playlist(
{
playerurl: "drplayer.swf"
}
);
});
</script>
<title>jQuery MP3 Playlist Creator FREE</title>
</head>
<body>
<p>My MP3 Playlist</p>
<!-- PLAYLIST BEGINS -->
<div id="playlist">
<!-- FIRST MP3 -->
<div href="disco.mp3" style="width: 400px;" class="item">
<div>
<div class="fr duration">01:00</div>
<div class="btn play"></div>
<div class="title"><b>Disco Loop</b> - First things first</div>
</div>
<div class="player inactive"></div>
</div>
<div class="clear"></div>
<!-- SECOND MP3 -->
<div href="hip-hop.mp3" style="width: 400px;" class="item">
<div>
<div class="fr duration">01:05</div>
<div class="btn play"></div>
<div class="title"><b>Hip Hop</b> - Nothing else matters</div>
</div>
<div class="player inactive"></div>
</div>
<div class="clear"></div>
<!-- THIRD MP3 -->
<div href="rock.mp3" style="width: 400px;" class="item">
<div>
<div class="fr duration">01:03</div>
<div class="btn play"></div>
<div class="title"><b>Rock</b> - Somebody someone</div>
</div>
<div class="player inactive"></div>
</div>
<div class="clear"></div>
<!-- FOURTH MP3 -->
<div href="my-pleasure.mp3" style="width: 400px;" class="item">
<div>
<div class="fr duration">01:01</div>
<div class="btn play"></div>
<div class="title"><b>My Pleasure</b> - Toxic</div>
</div>
<div class="player inactive"></div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<!-- CONTROL LINKS -->
<a href="javascript:void(0);" onClick="$('#playlist').playlist('prev');">Prev</a> |
<a href="javascript:void(0);" onClick="$('#playlist').playlist('next');">Next</a> |
<a href="javascript:void(0);" onClick="$('#playlist').playlist('pause');">Pause</a> |
<a href="javascript:void(0);" onClick="$('#playlist').playlist('play');">Play</a>
</body>
</html>
This article of February 21st, 2011 is authored by Partha Bhattacharya, who runs this website. Partha also creates video-based e-learning course for clients, and when time permits, writes guest articles for selected sites.
