W e are glad to see you made it to The Consigliere's™ Tutorial. Now, lets get down to the business of putting this "Midi Amp" on your page. To begin with the author's "read me" page is an excellent tutorial on how to set up the amp on your page. We will not go that much into detail on the excellent "read me" page but will show you where in the script you need to reconfigure.
T o begin with, you need to go to the "Get Code" link and download the "ZIP" file to your hard drive. Download it to a place that is basically clear of other images or anything else. The reason for this is quite simple. The "ZIP" file contains twenty three 23 different images, a "Read Me", a Demo and two (2 .js files (amp & amphtml). So to avoid confusion, download it to a separate place where you can see all the different files easily.
O nce you download the files now you need to upload all the files to your editor except the "Read Me" and "Demo".
B efore you upload any of the files you will notice that the 23 images are described with a hyphen ( - ) such as i-a1.gif , i-a1p.gif etc. This is the part you need to watch very carefully after you upload the images. Many editors have a bad habit of when uploading images that contain a hyphen ( - ) the editor automatically changes the hyphen to an underscore ( _ ). So what you had originally (for example) i-a1.gif , would now look like this i_a1.gif in your editor. If it does you need to rename each of the 23 images to reflect a hyphen ( - ) and not an underscore ( _ ) so they will be the same as when you downloaded the "ZIP" file. If you don't you will get very frustrated when you paste the code into your document and all you see are the "Notorious" little X 's and no images.
O ne other thing that you need to be aware of, is to get the actual script that you paste into your document you need to open the file "Demo". This is one of the files you downloaded from the "ZIP" file but did not upload to your editor. When this opens you will see an example of the "Midi Amp". At the top of your browser click on "View". When the window opens click on "Source". Now you will see the actual script you need to copy and paste into your document. When you see the HTML code you will see where the "Start" of the script is and also where the "End" of the script is.
</Script>
<Script>
<!--
if (document.all){
audiodiv.style.posTop=30; //Display Vertical Position is set here (distance from top in pixels)
audiodiv.style.posLeft=30; //Display Horizontal Position is set here (distance
from left in pixels)
autostart=true //This defines wether the player should automatically load first track and play it or wait for user to select a track
O n the above reconfigurations just play around with the pixel settings 30 30 until you like where the amp is positioned. On the autostart=true if you change it to autostart=false it will not start automatically when the page loads.
//Add below your song entries
songurl[0]="1.mid"
songtitle[0]="Phil Collins - Against All Odds"
Above is default which you change to your midi. Below is how you add more.
songurl[1]="http://www.your address.mid"
songtitle[1]="Artist - Song Title"
songurl[2]="http://www.your address.mid"
songtitle[2]="Artist - Song Title"
songurl[3]="http://www.your address.mid"
songtitle[3]="Artist - Song Title"
songurl[4]="http://www.your address.mid"
songtitle[4]="Artist - Song Title"
// Song entries should be placed above here
A s you will notice this is how you would add more songs to the amp library. You will also notice that "mid.1 has the number0 and then the songs are numbered from 0, 1, 2, 3, 4 etc. Song one ( 1 ) will remain a 0. In other words the "First" song in the script will be number 0. It is also always good practice to use the complete URL to a song, image or whatever you are linking to instead of just the /song.mid.
N
n a final note, the way this script is designed first off the Midi Amp is "Static" which means it is always on top and if positioned over text, images etc. it would cover them up. To avoid that what you need to do is after the end of the code and before the closing </BODY> tag you need to insert a
</DIV> tag so if you look below you will see where it is inserted.
<!-- Code ends above, copy till here and paste it in your HTML page -->
</DIV>
</BODY>
</HTML>
N ow below this tag you can write text or put images etc. If you do not do this anything you place below the script will be automatically positioned on the top of the page due to the script configuration. You can see that by where the links are on the page where the amp is located. You can also play around with <br> tags below the </DIV> to position what you want below the script.
|
Little Tips Directory [ Page 1 ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5 ] [ Page 6 ] |
|
[ News Letter Archives ]
[ Navigation Page ]
[ Archives Of Published Material ] |
If you are part of the ever growing number of webmasters who enjoy
sharing your knowledge with others on web design, join The
Consigliere's™ Ltd. web ring to broaden your scope of exposure.
Join Today
This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere™ Ltd.
Copyright © 2001-2002, The Consigliere™ Ltd., All Rights Reserved.