Programmming the HTML So It All works

Your .html file

You must source the required music-object.js JavaScript by pasting the following code within the head of your .html document.

<SCRIPT SRC="music-object.js"></SCRIPT>

<SCRIPT LANGUAGE=JavaScript

<!-- //

song = new Music ();

// -->

</SCRIPT>

There is a single link to download the Music Object in "Step 2."

"Sourcing" the required music-object.js JavaScript file is the same as having that code in your .html document. The many lines of code that would be involved if you did not source the JavaScript would be overwhelming to some code miners and possibly a signal to bail out for coding beginners. Those lines and lines of JavaScript are conveniently premade by Beatnik and available for free. Which this makes the job a lot easier.

Make sure you have the correct file path set for your document to "source" the required music-object.js JavaScript. If you do not put this document in the same directory as the document that is "calling it" you have to insert a ../ before the file names or more ../../ to go up a directory.

Their code

Now that these documents have been sourced, you must go to the Beatnik website and download the Music Object Extension that you are sourcing into your .html document. In this case, it is the music-object.js, which you get from Beatnik's servers by clicking here for a Mac or right-click and hold for a PC. The music-object.js must always be sourced first (at the top) when using multiple Music Object Extensions. Keep that in mind for future reference, although you do not have to worry about it in this specific instance of how to make a Beatnik interactive remix.

Put it to use

Remember that map, chart, or spreadsheet that we suggested that you draw up? It's gonna come in handy right about now.

Let's code the commands for controlling the drums. We want to turn one of the drum loops on with a single click that will also turn off the other drum loop(s). To sucessfully pull this off, we are going to use the music.setController command that is part of the music-object API. This method enables you to enter three parameters: music.setController(x,y,z) with x=MIDI track (not to be confused with MIDI channel), y=MIDI controller, z=value of MIDI controller. For example, (1,7,1) would be used in turning the volume of your MIDI files track #1 to a value of 1, which is inaudible. Do not use a 0, the Beatnik player does not like it. Really.

To present this in a simple format, we will make a really basic .html document that will produce on-click text links to trigger the loops in your interactive remix while in development. You can then take it and "jazz it up" as we have done by creating a custom interface with buttons.

If you have started your basic doc by sourcing the music-object.js you can move on. If you copy and paste the following code into the body of your .html document to get your drum-manipulating HTML/JavaScript going:

<A HREF="javascript://" ONCLICK="song.play(); window.setTimeout('song.setController (1,7,127); song.setController (2,7,1);',20); return false;">DrumCongaA</A><BR>

<A HREF="javascript://" ONCLICK="song.play(); window.setTimeout('song.setController (2,7,127); song.setController (1,7,1);',20); return false;">DrumCongaB</A><BR>

<A HREF="javascript://" ONCLICK="song.setController (1,7,1); song.setController (2,7,1); return false">Drums off</A><BR>

Let's go over that code again: the above three lines of code will produce three links. You can click on the first two to turn one drum loop on while turning the other off, and the third link turns both drum loops off. Break it down! 1-2-3-4! Huh! Take it to the bridge! Where's that confounded bridge? Ooops sorry, I'm back.

Lather, rinse, repeat

Repeat that code for every "group" of instruments that you have sucessfully included in your .rmf file. For example, your bass is on MIDI tracks 3 and 4, so copy the above code again, paste it underneath the code that's already there and change the 1s to 3s and the 2s to 4s in the first value space (HERE ONLY,7,1)...get it?

You can use the working example and View Source in your browser to get an additional reference, too. Oh nevermind, here's the code:

<A HREF="javascript://" ONCLICK="song.play(); window.setTimeout('song.setController (3,7,127); song.setController (4,7,1);',20); return false;">BassA</A><BR>

<A HREF="javascript://" ONCLICK="song.play(); window.setTimeout('song.setController (4,7,127); song.setController (3,7,1);',20); return false;">BassB</A><BR>

<A HREF="javascript://" ONCLICK="song.setController (3,7,1); song.setController (3,7,1); return false">Bass off</A><BR>

OK, now for some more copy-and-pasting-type code. Because now we have to embed the .rmf file you've already made into the same .html document. Copy and paste the following code into the body of your html document to embed your .rmf file into your page so it can be manipulated with the JavaScript commands that we practised with.

<SCRIPT LANGUAGE=JavaScript>

<!-- //

song.preloadEmbed ('joe.rmf');

// -->

COFFEEBREAK

A tidbit for intermediate to advanced Beatniks: we were advised not to use music.preloadEmbed verbatum, but always replace "music" with our song name. Thus Angry Coffee uses "song." You can replace all instances of the word "song" with your song name in all of the JavaScript commands.

Obviously, "joe.rmf" should be "your-file-name.rmf". So make sure you make that adjustment to the code in the final step. You know, the .rmf file that you completed by following the last tutorial page "Importing Your File into the Beatnik Editor Pro".