The Beatnik Player
 |
|
Click here to access files referenced
in this article
|
Adding high-quality, interactive audio to a Web page can be quite a challenge. First you must confront the issue of limited bandwidth, which seriously hinders the transfer of large audio files. If you sidestep the problem by using MIDI files - even General MIDI files - you aren't guaranteed consistent playback quality, because sound-card synths and General MIDI sound sets vary so much. How about interactivity? Using HTML, you can create items such as buttons that trigger sound files, but there's a limit to how responsive and flexible such a system can be.
Fortunately, Beatnik (formerly Headspace) has developed a solution to all these problems. Beatnik technology helps integrate high-quality, interactive MIDI and digital audio into your Web site. With it you can "sonify" your site in just about any way imaginable. Beatnik supports time-saving file compression for audio-file downloads, and it can also preload files so they seem to be available instantaneously. It includes its own software synthesizer, which means your MIDI files always sound the same, no matter where they're played. You can also use commands in your scripts to control the synthesizer directly. For example, you can send Note On messages, patch changes, and other types of MIDI data.
Visitors to a Beatnik-enabled site need the Beatnik Player plug-in; it's a small, quick, trouble-free download. Beatnik supports Netscape Navigator for Windows and Mac OS, but it only supports Microsoft Internet Explorer for Windows. The Beatnik Player is free for the viewers of your site, as are the tools you need to create exciting, interactive musical Web pages (that is, until you need something beyond the basics).
In this article, you'll learn how to use Beatnik to play MIDI files and send commands to play the Beatnik software synthesizer. I'll also show you how to make those sounds respond to button clicks and mouse movements.
TOUR DE BEATNIK
You'll get a taste of what Beatnik can do by visiting sites that put the technology to good use. A great place to start is the Beatnik home page (www.beatnik.com), where you'll find plenty of demonstrations, information, downloads, and useful links. If you haven't already installed the Beatnik Player, you'll be asked to download it when you arrive at the site. After installation, you'll be able to hear many new and wondrous noises as you explore the site. For example, you'll notice right away that many sounds occur in response to your mouse movements, and the response is immediate.
The site's For Beginners page (www .beatnik.com/software/beginners .html) presents a good overview of Beatnik's capabilities. At the top of the page is a set of "sonified" graphics. Moving your mouse over each picture triggers an appropriate sound. Lower on the page are examples of sonified links (hyperlinks that produce sounds when you click on them), company logos sonified with matching music themes, "quick clips" (tiny player icons that play musical excerpts), and a set of radio buttons for selecting background music.
Another good example of how Beatnik sonification can liven up a Web site is the Public Broadcasting Service's PBS Kids site (www.pbs.org/kids). Throughout the site, mouse movements trigger a variety of musical reactions appropriate to each graphic. Rolling the mouse over the program names plays a familiar nursery rhyme melody, randomly chosen from several melodies each time you connect to the site.
Beatnik's GrooveTub page (www .beatnik.com/showcase/groovetub) is another site well worth exploring. The GrooveTub is a virtual music-production environment that generates different rhythmic grooves in response to mouse movements and QWERTY keystrokes. You can build textures from various combinations, and when you like what you hear, you can click on the virtual guitar, harp, or flute to add distinctive melodies and harmonies - it's all under your control. Each instrument is played like its real-world counterpart. The guitar, for example, is strummed as you move the mouse over the strings, and you can select different chords as well. Strumming close to the bridge makes the sound brighter, as it would on a real guitar. These imaginative instruments offer an entertaining glimpse into the possibilities of online virtual instruments.
In the academic world, the University of Miami School of Music uses Beatnik to create its extensive collection of online ear-training drills (www.music .miami.edu/courses/et). You can practice identifying scales, intervals, and chords, and the Web site lets you know how well you're doing. Because Beatnik can send MIDI messages directly to the Beatnik Player's software synthesizer, all the test materials can be created on the fly, so the school doesn't need a large audio-file collection to cover every possible combination. (For another look at Beatnik-based interactive music on the Web, see "Music for New Media" in this issue of EM.)
SONIFY YOUR SITE
Now that you've seen what Beatnik can do, how do you use it to sonify your Web site? Using JavaScript commands embedded in your site is an easy way to add Beatnik features to it. JavaScript is a computer language specifically designed to work in HTML pages within Web browsers. (Browsers typically support JavaScript, so it doesn't really limit the number of people who can view your site.)
JavaScript is used to issue the commands in Beatnik's application programming interface (API). These commands let you control Beatnik's features. You'll need at least a basic understanding of HTML to make the most of the following examples. Beginners can download a simple Beatnik demonstration Web page from EM's Web site (see the sidebar "Beatnik Sample Examples"). The demo shows you how some of these techniques work.
But before you start learning how to use Beatnik, get the API documentation from www.beatnik.com/software/ tutorials/documentation_index.html (you can get there from the main page by following the Documentation link). Click on the Music Object API link and select the Windows or Mac OS version. The documentation contains tutorials, examples, demos, tools, and an extensive indexed reference.
My first example is simple: a Web page that plays MIDI notes on the software synth when the mouse moves over a section of text. I'll arrange the page so the visitor sees this:
G5 F#5 E5 C5 B4
When the mouse moves over a note name, that note sounds. The HTML document needed for this program is in the table "Musical Mouse Moves." If you want to try this example, copy the code on the left side of the table. Explanations for each line are on the right.
The mousePlayer.playNote command has six items in parentheses: MIDI channel (in this case, channel 1), bank number (the default bank for GM sounds is bank 0, but I'm using a sound from bank 1, an additional Beatnik sound set), program number (program 83, a sound called Ricochet Pad), note name (C4 is middle C), MIDI Velocity (100), and duration in milliseconds (-1 makes the note continue until it decays naturally).
Copy the code in the table and save it as an HTML file. Next find the stub .rmf and music-object.js files. They'll be with the Beatnik documentation. Make copies of these two files and place the copies in your Web directory with the HTML file. Now, when you load the HTML document into your browser, you should see the five note names, and the pitches will sound when you move your mouse over each name.
VENI, VIDI, MIDI
Though the Beatnik Player can play Standard MIDI Files, Beatnik also supports its own "native" format, called RMF (Rich Music Format). You create rmf files with the Beatnik Editor, which lets you convert audio (WAV, AIFF, and SDII) and MIDI files to RMF. It also lets you make rmf files that combine MIDI and audio, and you can embed audio samples as instruments to create a customized sample player on your page.
- RMF files offer several advantages: they support compression; they can include the names of the composers and performers, copyright notices, and other information; they are performance optimized for the Beatnik Player; and they support encryption. You can get a free demo of the Beatnik Editor at the Beatnik Web site (www .beatnik.com/software). The full version of Beatnik Editor 2.0 (Mac/Win) is available for $129.95.
To build a Web page that plays an rmf file, use the magicEmbed command to embed a Beatnik Player in the page. The JavaScript code would look like this:
<P><SCRIPT SRC="music-object.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript"><!- //
demoPlayer = new Music(); demoPlayer.magicEmbed ('SRC="beatnik_demo_open.rmf"');
// -></SCRIPT> </P>
You can control the playing of this RMF file in any number of ways. For example, you could use HTML to create a Start and a Stop button; following is the code:
<FORM METHOD="POST"> <INPUT TYPE="button" NAME="start" VALUE="Start" ONCLICK="demo Player.play()"> <INPUT TYPE="button" NAME= "stop" VALUE="Stop" ONCLICK="demo Player.stop()">
Buttons will start and stop the music.
</FORM>
The ONCLICK commands issue the play and stop commands to the Beatnik Player when the buttons are pushed. ONMOUSEOVER is a similar command; it simply makes the music start when the mouse passes over the indicated object (say, a graphic or a cell in a table).
You've now learned the basics of sonifying a Web site with Beatnik. As you study the Beatnik documentation, you'll discover a wide range of commands that let you control your Web page's sound. As you learn more about JavaScript, you'll devise ways to make your Web site more spontaneous, surprising, and musical.
If you want to experiment with some samples, go to the EM Links page and download the HTML, RMF, and js files for this article. The html files were created from the examples I've given. The RMF files are the MIDI files played by the examples, and the JS file is a library needed to make Beatnik's JavaScript commands work.
You can save all these files in any computer directory, but be sure to place them in the same location. Then launch your browser (assuming you have already installed the Beatnik Player), use the Open command, click on the Browse button, and open any of the HTML files to view them. Beatnik Demo Page.html is a good place to start, as it has some explanations right on the page. You can also select View/Source to see the HTML code. Try editing each file with an HTML or plain-text editor to make your own variations.
Once you have what you want, you can upload all the HTML, RMF, and JS files to your web site (your internet service provider should tell you how to do this), where they will be available for anyone to view and hear.
1.<HTML> <BODY>
2. <SCRIPT SRC="music-object.js"></SCRIPT>
3. <SCRIPT LANGUAGE="JavaScript"><!- //
4. mousePlayer = new Music();
5. mousePlayer.stubEmbed ('stub.rmf');
6. // -></SCRIPT>
7.<A ONMOUSEOVER="mousePlayer.playNote(1,1,83,`G5', 100,-1)">G5</A> <A ONMOUSEOVER="mousePlayer.playNote(1,1,83,`F#5',100,-1)">F#5</A> <A ONMOUSEOVER="mousePlayer.playNote(1,1,83,`E5', 100,-1)">E5</A> <A ONMOUSEOVER="mousePlayer.playNote(1,1,83,`C5', 100,-1)">C5</A> <A ONMOUSEOVER="mousePlayer.playNote(1,1,83,`B4', 100,-1)">B4</A>
8. <HTML> <BODY>
1. Tags to mark the beginning of the HTML document.
2. Tag to tell the browser to load the Beatnik music-object library. The library file must be in the same directory as your HTML file.
3. Tag to tell the browser that you are using JavaScript. "<!-//" tells earlier, non-JavaScript capable browsers to ignore the JavaScript so the browser won't print error messages when loaded.
4. Defines a Beatnik Music Object. You could call it anything, but choose a name (such as mousePlayer) that will help you remember it.
5. Embeds a music player in the page. Because you are not playing a MIDI file here, but instead are producing MIDI commands directly, load a stub file (an empty MIDI file) into the player. The "stub.rmf" file must be in the current directory.
6. Tag to mark the end of the JavaScript section. "//->" marks the end of the code that is "hidden" from non-JavaScript capable browsers.
7. "Anchor" tags. These create the text that shows up onscreen as the viewer's list of musical note choices, and they also instruct the mousePlayer to play the appropriate note when the mouse moves over the text.
8. Tags to mark the end of the HTML document.
