Sonification tutorial

To learn how to add basic interactive sonification to a web page, let’s build a version of the front page of the Sonicopia.com web site, http://www.sonicopia.com (see Figure 11-5). Sonicopia is a web design company that specializes in sound design using Beatnik authoring tools. Please note that all the content for this tutorial has been provided http://www.designingwebaudio.com.

Lesson 1: A simple mouseover

Here’s a real basic use of Beatnik.

  1. Start with a standard HTML page:

    <HTML>
<HEAD></HEAD>
<BODY BGCOLOR="black">
<IMG SRC="images/home.jpg" width="600" height="400" border="0">
</BODY>
</HTML>

  2. Source the Music Object into your HTML page:

    <HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="black">
<SCRIPT SRC="http://sonify.beatnik.com/music-object.js"></SCRIPT>
<IMG SRC="images/home.jpg" width="600" height="400" border="0">
</BODY>
</HTML>

  3. Create a Music Object instance: 

    <HTML>
<HEAD></HEAD>
<BODY BGCOLOR="black">
<SCRIPT SRC="http://sonify.beatnik.com/music-object.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">

listenPlayer = new Music ();

<IMG SRC="images/home.jpg" width="600" height="400" border="0">
</BODY>
</HTML>
    Mouseovers, audio navbars, background music, and automatic downloading of the plug-in are all included at the Sonicopia site. The lessons in this chapter take you through how to add these features to your own site.

    Figure 11-5. Mouseovers, audio navbars, background music, and automatic downloading of the plug-in are all included at the Sonicopia site. The lessons in this chapter take you through how to add these features to your own site.

  4. Embed an RMF file into the Music ...

Get Designing Web Audio & CD-ROM now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial