Sonifying a webpage with custom sounds

Take a quick look through the menu bar above. If you are familiar with the Beatnik interactive remixes, doing this tutorial can teach you to produce unsychronized interactive remixes like the Angry Coffee Interactive Drum 'n' Bass Machine.

Attaching custom sounds to a webpage or sonifying a webpage's graphics is easy to do. We'll provide some direction on the planning you should do before you attempt to make your own unique sonified webpage element.

Sourcing the JavaScript into Your .html Document tells you in detail how to make use of Beatnik's already written JavaScript. All you have to do is basic HTML and copy-and-paste! Could it be easier? No, it could not.

Coffeebreak -- music-object.js om My Server or Beatnik's? shows that the JavaScript you source into your HTML documents is an important part of what makes this machine tick. To make the Beatnik player work correctly you must always have the most current versions of all of the Beatnik JavaScripts that you use. This section discusses your JavaScript maintenance options.

Making Custom Sounds for Your Webpage gets into some actual technical audio engineering. We will provide examples of tools that you can use to prepare your audio for Internet use.

Importing/Exporting Your Sounds in and out of the Beatnik Editor/Converter will show you how to use Beatnik's tools to compress the audio and prepare it for the next step, after you prepare the sounds for your webpage.

Setting Up the .html for Your Webpage makes you copy-and-paste. Pretty rough. We will also show you some options for mouseOver and onClick commands.

Attaching Your Sounds to the Images -- Example 1 is the last step we used to sonify the Angry Coffee logo on this page.

AngryCoffee Interactive Drum 'n' Bass Machine -- Example 2 is a sonified interactive "music machine" applet made with the techniques in this tutorial.

Sourcing the JavaScript into Your .html Document>>