Implementation | DirectX 9 Audio Exposed: Interactive Audio Development

The DMX control works with HTML, Flash, and other web technologies. You can also use it in other applications that support ActiveX controls, such as MS PowerPoint and Word. To use the DMX control with HTML, you need a few lines of JavaScript to direct the routine calls from the HTML to the DMX control, which is located in a different frame (refer to the discussion on framesets in the "Putting It All Together" section) and identified as "Ctrl." The JavaScript audio.js is located in the Includes directory in the root of the site. Reference audio.js in the head of each HTML document containing routine calls as follows:

 <!-- JavaScript to call into DMX Control --> <script src="/books/2/395/1/html/2/includes/audio.js" language="JavaScript"></script>

The triggers we use to call routines are those related to mouse actions (i.e., user interactions):

 OnClick OnMouseOver

Our entire music implementation uses just these two triggers and the following syntax:

 OnClick="Call('RoutineName')"

Therefore, a call to the routine Section1 looks like this:

 OnClick=" Call('Section1')"

These calls are usually, but not exclusively, added to anchor tags.

Putting It All Together

The DMX control needs to remain loaded throughout the visit to the site, so it is necessary to create a frameset containing two frames, one for the pages of our site and the other for the control.

Index.htm, the default home page of our site, simply defines the frameset:

 <html>    <head>       <title>wide sounds :: pioneering and cutting edge interactive audio</title>    </head>    <frameset rows="445,*" framespacing="0" framepadding="0" frameborder="no"                           frameborder="0">       <frame src="/books/2/395/1/html/2/home.htm" name="main">       <frame src="/books/2/395/1/html/2/control.htm" name="dmx_control">    </frameset> </html>

Home.htm loads into main, and control.htm loads into dmx_control. We have defined the layout so that main has a fixed height and dmx_control sits beneath, keeping things tidy if the window resizes. We hide the DMX control in the actual web site, but it is visible here so that you can see the feedback that it provides.

The "Control" Object

Control.htm is a page containing nothing but the DMX control object. In the object definition, the codebase parameter defines the location of the control itself, and the name parameter identifies the control as Ctrl.

 <html> <body bgcolor=#ffffff> <div style="position: absolute; top: 0px; left: 265px; width:250px;">    <object class           codebase="http://www.widesounds.com/control/DMX.cab#version=1,0,1,5"            width="243" height="48" name="Ctrl">       <param name="_Version" value="65536">       <param name="_ExtentX" value="6429">       <param name="_ExtentY" value="1270">       <param name="_StockProps" value="0">       <param name="URL" value="http://www.widesounds.com/music/WSMain1.cab">       <param name="Start" value="Start">       <param name="SampleRate" value="44100">       <param name="Background" value="26,162,192">       <param name="Control" value="26,162,192">       <param name="Text" value="0,0,0">    </object> </div> </body> </html>

The various <param> tags define the appearance of the control, the music source file, and the name of the Start routine that automatically triggers when the content loads. When control.htm loads, the DMX control either installs or launches, and loads the file defined in the URL parameter. This URL must be absolute; relative URLs will not work. The bottom half of the control displays text output describing its current state, such as Loading Script or Running. Right-clicking on the control and clicking on the Output tab displays all of the output generated thus far, including details of routine calls. This output is helpful in diagnosing scripting errors.

Attaching Triggers to Anchor Tags

Attaching triggers to the pages of the site is extremely easy. Simply add the trigger definition as described above to the definition of an anchor tag. For example, I define the volume controls in the following piece of HTML:

 <!-- Volume Controls --> <div style="position: absolute; top: 155px; left: 577px; width: 200px;"           >    <a href="#" OnClick="Call('VolUp')">Vol +</a> |    <a href="#" OnClick="Call('VolDown')">Vol -</a> |    <a href="#" OnClick="Call('VolOff')">Music Off</a> |    <a href="#" OnClick="Call('VolOn')">Music On</a> </div>

Each anchor tag defines the text (e.g., Vol +) as a dummy link (href="#") with the appropriate routine call added using the OnClick trigger.

Multiple triggers are usable in the same tag, as in the following example:

 <a href=" whois.htm" OnMouseOver=" Call('Lozenge1')" OnClick=" Call('Section1')">

This navigation button has one action for a rollover (the tuned single note) and another for a click ('Section1'), which triggers two routines — one starting a new primary Segment at the next measure and the other playing the motif WipeUp.sgt.

Going through the HTML and adding the relevant triggers where necessary completes the music implementation. This is simple once the routine calls pass successfully into the DMX control, and you test each piece of functionality as you add them.

Test, Test, Test!

The final step, as always, is testing the music in the context of the site. As the permutations of interaction are vast and highly unpredictable, it is sensible to spend some time using and abusing the site to see how the music performs. Although users are likely to move at a sensible pace around the site, stopping to read some sections, perhaps skipping over others after a cursory glance, we need to be sure that it stands up to anything that the user may do. Some time spent trying as hard as possible to break it with frenetic button clicking is very worthwhile.