Hi kids. Today I’m gonna share a tutorial I found some time ago and will talk about how to expand it. You can decorate it, so it looks really complicated (at least more than it actually is), and you can use it with a database, so you dont only need to play one song. With a little imagination and coding; the sky is the limit, of this little bugger.
If you want to see how it works before starting, here is an example: TECHNICAL NINJA EXAMPLE
Let’s start. Download the Javascript player HERE. And in case you dont have a cool mp3 song to play; here I’m sharing a guitar study that I wrote some years ago: Frank’s Guitar Study 23.
I have Separated the whole thing in 4 files, so its easy to explain. So lets start:
index.php
I made it a php even though I’m not using any on the tutorial, but it can be expanded into it, so lets think ahead.
1. as always please add our <HTML> at the beginning and </HTML> at the end.
2. Now lets call a CSS style sheet (that we haven’t made yet). In case you don’t know, CSS is yet another language that you can (and should) use in web-development, it makes everything oh so much easier; and if you have A.D.D. or are just plain LAZY you will love it.
<style type=”text/css” media=”all”>@import “css/master.css”;</style>
If you close your IM and pay attention to what you are about to copy & paste, you will notice that im calling css/master.css, meaning that our master.css file (yes, the one we haven’t made yet) is inside a folder calles “css”. You don’t HAVE to put it in a folder, but I like to keep things organized, so DO IT this time.
3. Lets call our Javascript file (why? well because thats where the music player “IS”). See what I did? I “” the IS, because its not on the Javascript, and thats the beauty of it, It makes it work, but its actually using your browsers media player or quicktime player (depends on your browser). Marvelous.
<script language=”JavaScript” type=”text/JavaScript” src=”../soundpop.js”></script>
4. Ok, lets work on the body. Actually I was referring to the <BODY></BODY> Tags on the HTML, but if you spend all this time learning about web-development you should probably hit the GYM more often (your GF can thank me later).
Here is the beauty of it, we will use a DIV that we will specify in the css file. Why? Because then if you want to expand the player, and add some PHP to it, or put it into a web-page with other applications running, you only have to copy & paste the div and Viola!
<body>
<h2>Technical Ninja MP3 Player Example</h2>
<p>Frank is The Best!!!</p> <!– Yeah he is. Oh BTW in case you don’t know, this is how you write comments on HTML –>
<div id=”header”>
<tr></br></br></br></br></br></br></br></br></br></br></tr>
<tr>
<embed src=”example.mp3″ align=”bottom” autostart=”false” loop=”false” width=”300″ height=”15″ controller=”true” bgcolor=”#FF9900″></embed></tr>
</div>
See, we call the type of DIV with the <div id=”header”>, the DIV will take te attributes specified on the master.css page for that kind of Div, so you can have as many div of the same type without having to retype all the code again.
the bunch of </br> (or ENTERS/RETURNS), I only used it to space the player to the bottom of the DIV for specific purposes, but you don’t have to.
Now, the important part is that <embeded src……> that’s where you specify the song to play, everything else are attributes that are pretty much self explanatory; height, width, loop, you can change all that to whatever you want. I personally hate the autostart=true, cus I dont want to die of a heart attack every time I go into your web-site with my speakers at full volume and some Death Metal plays automatically, I have a weak heart. And…. THATS IT for the HTML.
master.css
So here we are, I’m only going to make one DIV, since thats all you need for this. On this Div I decided to put a Background. Yes, I know I promoted my music, and another one of my sites, plus I like to play with Photoshop; but that’s not the reason. I added that background, because I wanted to display the results of a PHP query that would choose the music to play, so That text would be replaced by the data from the database. (don’t you love me already?) Here is the code.
#header {
height: 200px;
width: 300px;
background: #db6d16
url(../images/musicplayer.jpg) no-repeat;
}
And if you put all these together, you will have an awesome MP3 player on your page. Simple enough huh? So far, but you can complicated all you want. On my next Tutorial I will show you how to use it to play music from a PHP query; the music will be on a folder, but all the info on a MySql Database, pretty neat huh?
In case it doesn’t work, you can always look at the source of the example. You know, right click -> view source… Nice.
** You may be wondering why I didn’t go into detail with the Javascript file, and its because I learned it from another Tutorial from David Battino. You can see the Tutorial at Digital Media.
