O'Reilly logo

Designing Web Audio & CD-ROM by Dylan Thede, Josh Beggs

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 Object ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required