Beatnik authoring system (Designing Web Audio)

11.2. Beatnik authoring system

The Beatnik authoring system includes three elements: the Beatnik Player, the Beatnik Audio Engine, and the Beatnik Editor. All three work in conjunction to mix and play back music and sound effects that are composed of a hybrid of MIDI-based instrument sounds and web-optimized digitized audio samples.

MIDI forms the core of the Beatnik System. Beatnik uses MIDI-like messages to control the Beatnik playback sound engine. Other authoring systems such as Flash must compile and upload MP3-compressed sound files for playback in a browser. In addition to compressed MP3 audio files, Beatnik compiles and uploads text-based MIDI instructions that trigger the pre-loaded bank of Beatnik MIDI instrument sounds to play back your musical score or composition. Once these standard instruments are downloaded with the Beatnik Player and housed on a user's hard drive, little data needs to be sent over the Internet -- just tiny instructions (compressed MIDI files) that instruct the Beaknik Player's tone generator/sequencer to play music. Later in this chapter, we will discuss the Beatnik Player's components in more detail.

Even though it relies on MIDI, the Beatnik System should not be confused with basic MIDI music on the Web. When a MIDI file is downloaded, it plays back using the General MIDI instrument bank pre-installed on most browsers and computer systems. General MIDI is a standard established by music equipment manufacturers that specifies that a given instrument bank number always represents a certain type of instrument sound, such as a horn or a drum. However, manufacturers are free to determine the synthesis algorithm used to create any given sound in their instrument bank. This leads to two problems: every instrument bank can have a different type of horn or drum sound, and there is no way to alter or customize the sounds in the instrument bank.

Beatnik versus MIDI QuickTime Musical Instruments

So what are the advantages of Beatnik over MIDI data using QuickTime Musical Instruments? There are two. The first difference is that the Beatnik System is tied to a robust web audio authoring environment that facilitates interactive audio programming using JavaScript commands. The second is that the Beatnik System allows users to add their own sound files and customized sound design via a user-definable bank of instruments.

In addition to the General MIDI instrument bank, Beatnik allows you to customize and enrich its palette of high-quality, pre-installed sounds with your own digital audio samples. Once your custom audio samples and MIDI files are imported into the Beatnik Editor, the editor compresses everything into the proprietary Beatnik format for embedding into your web pages. The result is a General MIDI sound engine combined with a customizable digital audio sampler.

Mixman remixers are another compelling use of Beatnik technology. By clicking on different buttons, users can remix popular songs, such as "Maria" by Blondie and email their mixes to friends. The Mixman remixers itself is a multichannel .rmf composition and is typically only 250 KB in size. Smaller still is the emailed remix data, which is simply the instructions dictating which channels to play or mute. The .rmf file is not actually emailed, but instead is served from a central location. An example of a Mixman remixer is shown in Figure 11-2.

Beatnik sound banks also provide Groovoids, a set of musical snippets or compositions. Groovoids are premade miniature MIDI compositions or sound effects used for quickly and easily creating loops, button sounds, and transition effects. Later in this chapter, we will walk through the steps involved in creating Beatnik files and publishing them to a web page.

Figure 11-2. By clicking on different buttons, users can remix popular songs, such as "Maria" by Blondie, and email their new "mix" to friends.

11.2.1. Beatnik Player

At the heart of the Beatnik System is the Beatnik Player, a browser plug-in that users must install. It's free, and it's a fairly small download (about 550 KB). Beatnik is working to have it included with other browsers, including Navigator and Internet Explorer.

The plug-in player allows the user's browser to play .rmf files (Beatnik's Rich Music File format). The Player also contains a software-based tone generator with two banks of 128 instruments each and a third bank for customized audio samples. The first of these banks comprises a standardized library of Beatnik instruments that map to the General MIDI specification. The second bank is a library of special Beatnik instruments. There is also a library of General MIDI percussion instruments and a library of special percussion instruments, which are assigned to MIDI channel 10 (the General MIDI drum channel). The third bank is empty and is used for receiving and storing any customized instruments contained within a given .rmf file. This user-definable bank of instruments allows sound designers to create custom instruments based on their own digital audio samples (or edited versions of the standard Beatnik library).

Although most designers will opt to keep the Beatnik player invisible to the end user, there are visible modes as well, which can be useful to provide end-user control. The visible Beatnik player features standard play, stop, and pause buttons, and more. You can toggle between the "meter" and "oscilloscope" visual modes by simply clicking on the lower part of the Control Player window. See Figures Figure 11-3 and Figure 11-4.

Figure 11-3. The Beatnik Player Control Panel's Meter mode displays flashing meters that show which of Beatnik's 32 voices are active.

Figure 11-4. Clicking on the lower part of the Beatnik Player's Control Panel displays the oscilloscope mode, which monitors Beatnik's total audio output.

These two different modes provide alternate visual representations of a sound's playback. The meter mode displays a visual representation of the active channels producing sound. The oscilloscope mode displays a line that changes according to the different frequencies being played back.

Clicking and holding (Macintosh) or right-clicking (Windows) the mouse button brings up a series of commands that allows the user to perform other actions, such as pause or stop, display song, and show copyright info and other relevant media information.

11.2.2. Beatnik Audio Engine

In addition to beinga software-based tone generator, the Beatnik Audio Engine is a software audio mixer capable of mixing 64 discrete musical tracks in real time and playing back a mixed bag of file formats and sample rates. It is part of the core technology inside the Beatnik Player. The mixer's functions are controlled by JavaScript, so it is with JavaScript that you manipulate how the Beatnik Audio Engine responds when a user action occurs, such as rolling over an image or clicking on a link. While you will need to know some JavaScript, the mixer's ability to be controlled via JavaScript is key to the integration of the audio mixer's functionality with a predominant language used in web development. This helps facilitate and differentiate the Beatnik platform and makes the mixer useful and powerful to a web audio developer.

A basic understanding of JavaScript also lets you use Beatnik's ActionSets, which are available for Macromedia Dreamweaver and Adobe GoLive. ActionSets allows you to automate much of the Java- Script coding process. Beatnik also provides an integrated online tool called the Methodizer that automatically generates JavaScript code for the most common types of functions and user actions. You can then simply cut and paste the text code examples into your HTML pages. You can grab the Methodizer at Beatnik's web site, http://www.beatnik.com.

11.2.3. Beatnik Editor

The Beatnik Editor is the tool used for creating .rmf files. Unlike full-featured MIDI sequencers with multitrack editing and recording capabilities, the Beatnik Editor is primarily a content integration tool for combining MIDI scores with custom digital audio samples. The editor lets you import MIDI files from your favorite MIDI sequencing program and map the various MIDI tracks to the desired Beatnik instruments. The Beatnik Editor also allows you to input your own sampled recordings, such as a three-second vocal line or a guitar riff, and map it to the MIDI note ranges of your choosing. The editor accomplishes this by creating a third bank of sounds that resides in the .rmf file itself and is served to the user's browser along with the .rmf file. The process is similar to working with a MIDI keyboard sampler to create custom patches. The Beatnik Editor audio samples can be musical instrument sounds, sound effects, or even short vocal samples.

The Beatnik web site

You can download the plug-in, the editor, and further documentation at the Beatnik web site, http://www.beatnik.com/beatnik/. The web site also contains Beatnik Production Music featuring over 120,000 .rmf sound effects and compositions developed by Beatnik and a host of other big name production music partners. These readymade .rmf files may be licensed for commercial use on the Web. The Beatnik web site also houses tutorials for Flash, Dreamweaver, Director, and other authoring tools.

It is important to note, however, that unlike the standard Beatnik instruments that reside on the user's computer (in the first two banks of the Beatnik Player), these custom instrument samples must be downloaded with the .rmf file over the Internet. So if you are using custom sounds, you will want to compress your audio samples using the Beatnik Editor's MP3 compression. The Beatnik Editor even allows you to mix and match variable encoding rates, sample rates, and bit depth, all in the same .rmf file. This allows you to "crunch" the file size of some sounds while allowing more fidelity (and file size) to more delicate sonic textures.

With these three elements of the Beatnik System, you can create customized, complex, responsive musical interaction with the graphical elements of your web site. You also can achieve extremely small file sizes if you are careful to crunch down your custom instrument sounds. And you have the tools to control all aspects of a sound's quality. Now let's get into the specific process of authoring with Beatnik tools.

First, we will discuss the basic skills you need to create Beatnik soundtracks, and then walk you through the step-by-step process of "sonifying" a web page, as Beatnik calls it. We will also introduce some basic concepts of "sonification," including the Music Object (Beatnik's API or library of JavaScript methods.)

Local serving

It's also possible to source the Music Object from your own server. Here's how:
Go to http://www.beatnik.com/to/?music-object.

Click on the Windows icon to download a zipped copy of the music-object.js file, or click on the Mac icon to download a stuffed copy of the music-object.js file.
Delete the piece of code you used before to source the Music Object and add this code just below the <BODY> tag in your HTML page:
<SCRIPT SRC="music-object.js"></SCRIPT>
That's it. You're now serving the Music Object yourself. (You will need to add this code below the <BODY> tag of every page you want to sonify.) A significant benefit to serving the Music Object this way is if the Beatnik Music Object server should go down, your site will still be sonified.

11.2.4. Authoring with Beatnik

To sonify a web site with Beatnik sound, you need some basic experience in two areas:

Basic sound conversion: Once you have sonified an HTML page with the standard sounds inside the Beatnik Player, you will be ready to add custom sounds to your site. This can be easily achieved by simply saving the sounds to standard .wav or .aiff files, and then importing them into the Beatnik Editor and exporting them as .rmf files.
Basic JavaScript skills

Remember your semicolons

You need to end most JavaScript commands with a semicolon, and "Music" must be capitalized.

11.2.5. Introduction to the Music Object

The Music Object is a class library written in JavaScript that lets you write your own JavaScript statements to control the Beatnik Player. It has two main functions:

It hides the differences between the various browsers and platforms your audience may use to view your web site.
It allows access to a set of methods and properties that you can use to make your pages come alive with sound.

More technically:

The Music Object wraps the Beatnik Player so that it works consistently with Netscape's LiveConnect API and with Microsoft Internet Explorer's ActiveX API, and it writes both EMBED and OBJECT tags for you.
The Music Object is also the Beatnik Player's JavaScript command set (or API). The Beatnik Player file sits on the user's computer, and the Music Object sits on a web server and is included with your sonified web pages. Interactive sound control is enabled when the two come together in a browser.

To begin authoring with the Music Object, follow these steps:

Source the Music Object into your HTML page.

"Sourcing" a JavaScript file is the same idea as "including" a source file in other languages like C++ or C. While the script code resides in an external file, it's treated as though its contents actually appeared in the parent file.

Simply copy this bit of code just below the <BODY> tag in your HTML page:
```
<SCRIPT SRC="http://sonify.beatnik.com/music-object.js"></SCRIPT>
```
This code will retrieve the Music Object from Beatnik's servers whenever someone visits your site.
Create a Music Object instance.

After sourcing in the Music Object, you need to instantiate a new Object of type Music before you can use it. This is your first Beatnik operation that requires actual JavaScript programming. To execute this operation, first open a new script tag and designate the language you will be working with:
```
<SCRIPT LANGUAGE="JavaScript">
```
Provide a name for the new instance, then use the JavaScript keyword new, and the name of the object class Music. For example:
```
theNameYouWantToUse = new Music (); 
```
Embed an RMF file into the Music object using the preloadEmbed method, like this:
```
theNameYouWantToUse.preloadEmbed ('yourRMFfile.rmf'); 
```
Then end the script tag:
```
</SCRIPT> 
```

Set up the RMF file to play back when the user interacts with the page. This can be as easy as calling:

<A HREF="JavaScript://" onMouseOver="theNameYouWantToUse.play();">
your gif, link, or page element here</a>

Preview your file. Save your file and preview it in your browser.