taualph's Midi Starter Kit
[ Back to the Welcome page ]

"How do I turn the Midi Player on?"
If you came here via a URL or a bookmark from another site, and the Midi Player isn't running, no problem, you can click here to turn it on and re-open this page.

"How do I make the Midi Player keep running between pages?"
Are you sick of the music stopping, as visitors move from one page to another round your site? And wouldn't it be KEWL if you could play a whole list of songs, instead of just one per page? Hey and what about letting visitors choose songs from a menu?

No problem: when you follow this link, drag your mouse over the text that's in white to copy. Paste it in your pages - just edit the song names, the seconds they play, and the filenames. See? Easy!

If you want to know more, these are the tekky bits:
What's a midi file
What's Streaming
What's a Meta tag

"Where do I get the the Midi files?"

  1. Try shopping round the file archives at the Midi Farm to start with, then
  2. you could go and explore the Informatrix Top 1000 Lists

 

 

 

Here's the HTML
What follows is adapted from "Auto-changing JavaScript" and "Follow Around Sound". Click here to DOWNLOAD the FREE Crescendo player if you don't already have it.

For this "trick", you need to know how long each of your songs plays for, in seconds. When you double-click on your midi file icons, the media player opens and shows you how many minutes and seconds the song will play for. Convert that to seconds.

What keeps the midi player going as visitors change pages, is that you open a separate window for the first song, at the same time as you open your home page. Now you can make a circle of song pages that can only call each other. Then, at the end of the xx seconds that each song takes to play, the window uses a META tag to call the next song window. The last song window loops back to the first one, and each song window is full of links to other songs that visitors can click on.

I've put all through the bits in white. When you get these pages working, you can come back and delete or edit them.
File 1: save this file as Index.html <HTML> <HEAD> <meta http-equiv="refresh" content="9; url=./Mainpage.html"> <!--This line opens the file called Mainpage.html after 9 seconds. You will almost ALWAYS be calling Mainpage.html from within the same folder or directory, so the URL can start with ./ because a single dot starting a directory path is just UNIX shorthand for: THE CURRENT DIRECTORY --> <TITLE>indexDotHTML</TITLE> <!--You save this first file as INDEX.html (UPPER or lower case doesn't matter in HTML), so that it will be the first file to load when someone visits your site. --> </head> <body bgcolor=#ffffff TEXT="#000000" LINK="#0000FF" VLINK="#800080" ALINK="#FF0000"> <!--This makes the background colour white, text black, link colours, ... etc.. So reset the colours to what YOU like--> <SCRIPT LANGUAGE="javascript"> <!-- // the LESS THAN sign followed by an exclamation mark, hides this text from non-JavaScript browsers, // and DOUBLE SLASH is a way to get browsers that DO recognise JavaScript // to ignore your comments to the right (till the end of the line). window.open('mid1.html','liveupdate','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=0,copyhistory=0,width=280,height=550'); //--></SCRIPT> <!--You just opened a window called Mid1.html , and all the other words except WIDTH and HEIGHT can only be followed by either a zero or a one. Words followed by 0 mean FALSE, or turn OFF, or do NOT show. So there's no menubar at the top of the window, and no status bar at the bottom of the window. But I wanted a scroll bar in my window, so I set it set equal to 1 (as TRUE, or DO show, in the new window that will be created). If you know the height of your own window will fit on anyone else's screen, then it would look cleaner to turn it off too. WIDTH and HEIGHT do not have to equl zero or one, because they are the dimensions of the new window as measured IN PIXELS (think of pixels as the smallest dot on your screen)--> <BR> </body> </html> Save the next file as Mid1.html to play your first midi file (in this example, for 3 minutes 57 seconds, which is 237 seconds in the META tag), and then call the second song page (in url=...). Then save it again as Mid2.html, mid3.html, etc., and edit the META tag, the EMBED tag, and the list of links, for each song page. Your last song page will have url=mid1.html in the META tag to complete the loop. <HTML> <HEAD> <META http-equiv="refresh" content="237; url=mid2.html"></a> <TITLE>midi Song One</TITLE> </head> <BODY BGCOLOR="#000000" TEXT="#ffffff" LINK="#0000FF" VLINK="#800080" ALINK="#FF0000"> <!--In the META tag above, change 237 to the number of seconds that your song plays, and change the filename ( in url=mid2.html ), to the title of the NEXT song window that will be called --> <!--In the EMBED tag below change Two Princes.mid to the name of your own midi file to to play instead --> <EMBED src="TwoPrinces.mid" width=200 height=55 autostart=true loop=true> </embed><BR> <FONT SIZE=2 FACE="Comic Sans MS"> Choose a song from the list below, or let them scroll through. Close this window to shut the music off.<br> <font color="#FFF000">1. Two Princes (3:57 mm:ss)</font><BR> <!--Change the song name above to your first song. The current midi file playing is listed above in yellow--> <!--Now edit the links below to the other songs you want to play--> <!--So for each song, there will be a file called midx.html and a different song name below --> <B> <a href="mid2.html"> 2. California Dreaming (2:58)</a><br> <a href="mid3.html"> 3. DownUnder (3:24)</a><br> <a href="mid4.html"> 4. Layla - Unplugged Version (4:42)</a><br> <a href="mid5.html"> 5. Lambada (4:51)</a><br> <a href="mid6.html"> 6. Sting (4:14)</a><br> <a href="mid7.html"> 7. When I come Around (2:55)</a><br> <a href="mid8.html"> 8. Rock 'n Roll Heart (3:38)</a><br> <a href="mid9.html"> 9. MmmMmmMmm (3:43)</a><br> <a href="mid10.html">10. Nobody Knows You When You're Down and Out (3:42)</a><br> <a href="mid11.html">11. Layla - Original Version (2:41)</a><br> <a href="mid12.html">12. With A Little Help From My Friends (4:41)</a><br> </B> <BR> This page works on Internet Explorer 3 and Netscape 3 ... <B><font color="#00ffff">ENJOY!!!</font></B> </FONT> </body> </html>
One last Caveat
M One bloke was nice enough to put a link to my page, to help others who wanted this HTML. But some people actually FLAMED him for that - he'd put the link on the midi player pages - so when visitors got to my page, they had no Status Bar, no Tool Bar and no Menu Bar.
 ( Ha! Remember we turned them off?  *he he he*).   

If you right click on the drag bar at the top of the browser window, you can toggle the other bars on and off. But it's simpler to put the link on a normal web page elsewhere in your site. Remember: no links in or out of the "closed circle" of Song Pages.

My first page at this site is a META page too (so music loads quickly and people don't get bored while something bigger's loading). If you DO want to add a link to my page, you can copy this and paste it: <B><A HREF="http://www.oocities.org/ResearchTriangle/9982">Check taualph's for a Midi Starter Kit</A></B>
ENJOY!!!
F (Back to Page Menu) È
This page hosted by Get your own Free Home Page