Simple Javascript MP3 player integration tutorial

Posted on Thursday 31 January 2008

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.

admin @ 3:28 pm
Filed under: JavaScript / AJAX and Web-Design
Same Page Navigation Javascript / PHP Tutorial

Posted on Thursday 31 January 2008

Same Page navigation, is a wonderful idea if you have a great artistic (complicated) design and you dont want to we fighting with every time you make a new page, or if you are just plain lazy.

If you want to see how it works before starting, here is an example: TECHNICAL NINJA EXAMPLE

This is all in one page. Make sure you name your page index.php; important since you will be using php on it (I know you knew, just making sure).

index.php
1. add the basic HTML tag <HTML> and at the bottom of the page add the </HTML>. (easy enough)
2. now lets add the JAVASCRIPT that makes the form submit without the need of any “submit button”:
<script type=”text/javascript” language=”javascript”>
function sender(form){
form.submit();
}
</script>

In case you didn’t know, this is a function (yes sender is the name and ‘form’ its parameter (the one you will send from the HTML form later on)), and its only job is for the form to submit when changed. And thats it for the Java Script.

3. Lets open our HTML <BODY> tag and remember to close it after you enter the code </BODY>.
4. Now lets make an HTML Drop-down menu; in this case a simple FORM.
<form action=”index.php” name=”form” method=”post”>
<select name=”selection” onChange=”sender(form)”>
<option value=”">– Select a Section –</option>
<option value=”home”>Home</option>
<option value=”about”>About us</option>
<option value=”services”>Services</option>
<option value=”blog”>Blog</option>
<option value=”contactus”>Contact US</option>
</select>
</form>

The important line here is “<select name=”selection” onChange=”sender(form)”>”. “selection” is the value name that the form will POST (send) to the browser and with the “onChange=”sender(form)” you will tell it to run the JavaScript function. As you can imagine, you can change those options to whatever fits your needs. And Hey, thats it with the HTML.

Now lets go to the super cool (just in case you get excited with php) PHP. We are going to use something that the great gods of PHP gave us as a token of their love == switch. Switch is a great little word that in lame terms, does something different for each option you can pick. If you pick Services it will give you something different than if you click Contact us. (Great huh?)

First lets assign whatever comes from the form to a variable; in this case $page. (just if you have no background of php; we use a $ sign in front of the variable name, just to let it know its a variable. as you probably noticed you dont do that on Javascript (cant they just get along?). You will also notice that in PHP you end each statement with a (;) , another one of those you dont need to to in javascript (but you can).

$page = $_REQUEST["selection"];

// I prefer to use $_REQUEST instead of $_POST or $_GET, just to make sure it picks either or. (in case you are wondering what the heck is //; thats what we use to comment lines in PHP.

Now to the actual Switch code. First we call it and assign the variable to use. Then we give him all the different options and in the end a default option, something to do when none of the previous is present.

switch ($page){
case “home”:
$content = “<h2>HOME</h2>Home Page.”;
break;

case “about”:
$content = “<h2>About Us</h2>We are Awesome.”;
break;

case “services”:
$content = “<h2>Services</h2>You pay, we give you service… SHOW ME THE MONEY!”;
break;

case “blog”:
$content = “<h2>Blog</h2>We love to talk…or write…”;
break;

case “contactus”:
$content = “<h2>CONTACT US</h2>Give me a call.”;
break;

default:
$content = “<h2>HOME</h2>Go, change the page… Frank is the BEST!”;
}

See, what we are doing here is assigning a different text to show with each option, but you could change this for links, pictures, paragraphs, or all together, anything that fits into the <BODY> </BODY> of HTML, can go into these variables. In case you don’t know, php can use either (”) or (’) for an echo (yes, echo is like the document.write of js, or print in other Languages.

For the end we will add an echo of the variable $content. In really lame terms we are saying: Dude, show on screen whatever I wrote on the $content for the option I chose on the form.

echo $content;

?>

In case you were wondering, <?php and ?> are the tags for the beginning and end of a PHP code, and a question that no one ever answered for me. Yes, you can use as many as you want in different parts of the code.

And thats it!!! It should work. If for some reason it isn’t check the whole code HERE.

***I learned this from a fellow blogger, you can see his tutorial in Spanish at The Melbos Experiment.

admin @ 11:45 am
Filed under: JavaScript / AJAX and PHP / MySql and Web-Design
Welcome

Posted on Thursday 31 January 2008

Welcome to The Technical Ninja - Ninja Web-Development Tutorial Web-blog (whoa! that’s a mouth full).   Many moons ago, I got interested in Web-Development and like you, started looking around the internet for tutorials.  I found hundreds and maybe thousands of tutorials, yet it was pretty tough to find some that would really explain things in terms lame enough for someone with little programming/designing experience would understand (AKA ME).

That’s why I have decided to share whatever knowledge I have with everyone, always keeping in mind that NOTHING is obvious and I will make it my mission to explain everything in the lamest terms possible, so everyone can learn. Please if there is any step in my tutorials that you think it was too steep, let me know and i will do my best to correct this…  Happy Developing.  :)

admin @ 7:16 am
Filed under: Miscellaneous