Web Audio Lab: Three JavaScript Tricks to Spice Up Your Site
Pages: 1, 2

2. Random Sound on Page Load

One frequent reader request was for a way to play a random sound file when the page loads. Here's a simple approach I discovered at 24fun.com and subsequently used at BambooSoul.com, a site I designed for a shakuhachi player. So that you can focus on the randomization section, I'm using the simplest possible embedding code. There's a more complete approach at Scriptwell.net, and many programmers use the <object> tag as well, as shown in Experiment 1.

<script type="text/javascript">

<!-- Hide script from old browsers

var Waves=new Array("sound1.mp3","sound2.mp3","sound3.mp3","sound4.mp3","sound5.mp3");

var WavePath="http://downloads.oreilly.com/digitalmedia/2007/06/"; // If your files are in another directory, such as "sounds/", put that path here.

    var WaveNumber=Math.floor((Waves.length)*Math.random());

    var DisplayNumber = WaveNumber*1+1; // multiply to ensure items are numbers

    document.write("<h2>Item "+ DisplayNumber +"<\/h2>(<a href='http://digitalmedia.oreilly.com/examples/oreilly/digitalmedia/2007/06/randosound.html'>Refresh</a> to hear a new sound.)"); 

    document.write("<embed src='" + WavePath + Waves[WaveNumber] + "' autostart='true' loop='false' width='2' height='2' hidden='true'>");

    document.write("</embed>");

    // Stop hiding script -->

</script>

Try it (a pop-up window will open). The voice is from the Cepstral speech synthesizer. I made the music in Ableton Live.

3. Inline Player

One of my longterm goals is to learn enough JavaScript to make my own version of the Del.icio.us PlayTagger. This slick bookmarklet inserts a tiny Play/Stop button in front of MP3 links on almost any site you visit. Unlike my pop-up player, though, Playtagger supports only the MP3 format, and it lacks a position slider and volume control.

So my latest experiment is to encode MP3 links so they spawn a player bar next to themselves rather than in a pop-up. Again, I've simplified the embedding code for clarity. I also want to find a way to replace the current playback controls when someone clicks a link a second time. (Currently, the controls stack up, which is somewhat entertaining.)

Click these audio links to see the effect. Notice how the player width can be set on a link-by-link basis. These clips are from our interview with producer/remixer Carmen Rizzo.

White Flag (remix)

Dunya (short controller bar)

Here's the code. The links take the form <a href="songfile.mp3" target="_blank" id="example1" onclick="javascript:playBtn(this.id,this.href,'100');return false">Click here</a>, in which each has a unique ID and triggers the playBtn JavaScript when clicked.

<script type="text/javascript">

    // Embed a media player before a link when the link is clicked

    function playBtn(linkID,filePath,playerWidth) {

    if (!playerWidth || playerWidth<34){

    playerWidth=34;

    }

var oneSpace = document.createTextNode(" ")

// To do: Create an outer object called iePlayer with Internet Explorer parameters, then add tinyPlayer as a child.

var tinyPlayer = document.createElement("embed");

    tinyPlayer.setAttribute("width",playerWidth);

    tinyPlayer.setAttribute("height","16");

    tinyPlayer.setAttribute("type","audio/mpeg");

    tinyPlayer.setAttribute("src",filePath);

    tinyPlayer.setAttribute("kioskmode","true");

var triggerLink = document.getElementById(linkID);

// To do: Remove player if it already exists (because the user clicked the link twice)

 triggerLink.parentNode.insertBefore(tinyPlayer,triggerLink);

    triggerLink.parentNode.insertBefore(oneSpace,triggerLink);

    }

  </script>

 

Onward

That's all we have space for now, but there's a lot more bubbling in the lab. I'll share some interesting video-embedding tricks in a future article. Please leave comments below if you have suggestions or questions.

David Battino is the audio editor for O’Reilly’s Digital Media site, the co-author of The Art of Digital Music, and on the steering committee for the Interactive Audio Special Interest Group (IASIG). He also writes, publishes, and performs Japanese kamishibai storycards.

Return to digitalmedia.oreilly.com.