How To Use My Music Script

Hey everyone. Petie here with version two of the tutorial. After looking at someone's site who was using this script but wasn't in control of the files being used with it, I realized that it just wasn't right. With version two, you now specify what you want displayed in the dropdown. It will make the code a little longer but it guarantees a nice looking list, even if you can't rename the files. If you have any questions, feel free to contact me through myOtaku or send an email to [email protected]. Here's what you do:

Step 1: Adding the Code to Your Page
The first thing you need to do is add a code to your page that links it to my script. To do this, use the following:

The parentheses following writeMusic will not be left empty though. The next step will show you how to start adding data to the script.

Step 2: Adding a Base URL
A base URL is used to make adding files to the script simpler. If all of your files are hosted at one location for instance, all you have to do is type the part of the URL that is the same for all of them and from then on, all you need is the file name. My example files will be from the Final Fantasy VII section of the Video Game Music Archive so my base URL is http://www.vgmusic.com/music/console/sony/ps1/. Adding it is simple. From this point forward, when you see writeMusic() with anything in it, it is the same writeMusic() that is in the script. I'm just not typing the whole script tag again so it's easier to read. So, to add your base URL, you'd use the following:

writeMusic('http://www.vgmusic.com/music/console/sony/ps1/');

There are a couple of important notes here. First, the base URL is mandatory. If all of your files are hosted in different locations, you have a few options (see below for examples). You can fill in the base URL for a single file, use an empty set of single quotes, or fill in any random URL just so something is there. The script will break if the base URL section is omitted completely though. Second, you must include the final slash (/) at the end of the URL or again, the script will break. Also, take note of the quotes. All data being put into this script will be surrounded by single quotes and separated by commas.

If You Do Not Have a Base URL:
You can fill in any of the following for the base URL if you do not have one:

writeMusic('Base URL for one file');
writeMusic(''); - Empty set of two single quotes.
writeMusic('A URL from any site');

Just remember that you must fill in something for the script to function.

Step 3: Adding Your Songs
Adding songs is a simple process and with version two, there are no file name restrictions. There is one major difference though. This time, for each song, you'll have a title entry and a file entry. The first one will be the title and this is what will display in the dropdown. The second will be the file name. If the file is hosted at the base URL, it's just the file name. If it's not, the file name entry turns into an entire URL to the song you're using. I'll be using one example at the base URL and one at a different URL for this step.

writeMusic('http://www.vgmusic.com/music/console/sony/ps1/', 'Final Fantasy VII - Aeris\' Theme', 'aerith.mid', 'Super Mario 64 - Final Bowser', 'http://www.vgmusic.com/music/console/nintendo/n64/m64bowsr.mid');

As you can see, aerith.mid is hosted in the ps1 section so I did not include the entire base URL. m64bowsr.mid, on the other hand, is in the n64 section of the site which means I need to include the full URL for it. You can also see that the title for each song appears before the file name. This is the text that will eventually show up in the dropdown list. Also, take note of the backslash (\) before the apostrophe in the Aeris' Theme title entry. Because each entry is surrounded by single quotes, if there is an apostrophe or single quote in the title, it needs to be preceded by a backslash, as shown above.

Step 4: Putting it all Together
By now, I hope you have a good idea of what's going on and that this step will only be used to show you a final result. Here, I'll do exactly what the step implies - I'll show you a finished product. I'll be using the following files in the example:

http://www.vgmusic.com/music/console/sony/ps1/aerith.mid
http://www.vgmusic.com/music/console/sony/ps1/Ff7battl.mid
http://www.vgmusic.com/music/console/sony/ps1/ff7_boss.mid
http://www.vgmusic.com/music/console/sony/ps1/Jenova2.mid
http://www.vgmusic.com/music/console/sony/ps1/prelude.mid
http://www.vgmusic.com/music/console/nintendo/n64/m64bowsr.mid

As you can see, one of them will not be at the base URL. I'll also show you what happens if you do not include an artist in your title. Just remember that if you do include an artist, it should be in the form of "Artist - Title" (the spaces should be included for best results).

The Code:
<script type="text/javascript" src="http://otaku.brokenrevolution.com/writeMusic.js"></script>
<script type="text/javascript">window.onLoad = writeMusic('http://www.vgmusic.com/music/console/sony/ps1/', 'Final Fantasy VII - Aeris\' Theme', 'aerith.mid', 'Final Fantasy VII - Battle Theme', 'Ff7battl.mid', 'Boss Battle', 'ff7_boss.mid', 'Jenova Battle', 'Jenova2.mid', 'Final Fantasy VII - Prelude', 'prelude.mid', 'Super Mario 64 - Final Bowser', 'http://www.vgmusic.com/music/console/nintendo/n64/m64bowsr.mid');</script>

The Result:

There are just a few notes I have for you regarding this script. First, be aware that your output will not look the same as it does here. There are some CSS styles applied to this page that alter the look of the dropdown and button. Second, don't worry about the default song. The script automatically selects one song from the list at random and sets it as the default. It will not auto-start on page load though. I have a big problem with auto-starting music so I disabled that feature. However, the song will automatically start when you click the "Load Selected Song" button. Finally, while all of the files I used here are midis, any audio format will work.

If you're having any trouble, the code I showed you above is the code I used so feel free to copy and paste that so you have a working model to play with. Once you have that working, you can try filling in your own data and work from there. This should help you get past any problems you may encounter. Of course, if it doesn't, remember that I'm here to help if you need it so if there's something you don't understand, feel free to contact me. That's really all you need to know. Just follow these directions closely and you should be fine.