Blog

Add Sound Effects to HTML with Javascript and Flash

I normally hate music on websites. You enter a site, suddenly hear a jingle or music and instantly start looking for the sound off button. If i can´t find it and the sound does not stop, i´m out.

I´m not talking about this kind of background music in this article.  I rather want to show you a technique to catch your users attention after he interacted with your site / webapplication. Especially when using AJAX techniques where the page does not reload. You are (probably)  already giving the user some visual hints(loading.gif), so he knows that something is happening. Those kind of hints can also be small pieces of sound.

What you need to get things cooking:

  • a couple of small mp3 sounds
  • an event like onsubmit / onclick or any kind of switch in your javascript which is worth the sound output
  • the single MP3 Flash Player (because it is so damn small)
  • some Javascript + basic coding knowledge

The Basics:

You are catching some HTML Element Event (f.ex. onclick), with javascript. Than you insert a somehow hidden flash-embed into the dom which holds the mp3 player. The mp3 player recieves his settings via post parameters, which are given to him inside the flash-embed code and starts playing instantly.

The player and some of the javascript i´m using, comes from the jmp3 jQuery Plugin. Please check the license of the player!

The only tricks we actually need are:

  • dynamically include the hidden flash player
  • set the right variables for the flash player like: no repeat, no download, auto start playing and so on.
  • I went one step further thinking always the same sound would be boring. So i have a javascript array with sound filenames, from which a sound is randomly picked.

In the example i´m using jQuery to grab the events and do the DOM modifications. Of course you can take your prefered js library or plain javascript(you freak) for this too. The example only uses  a click-event and the  insertion into the DOM can also be done in other fashions. I´ll leave that to you to play with it.

I thought of naming this technique MANDY. Of course i could´ve used some funky acronym, but what the hell. With such a name you can tell your coder-friends „I did it with Mandy“ or „I´m just diving into Mandy“, which is probably making a bigger impression.

Locations where i did it with Mandy:

  • at the post office -> form submissions with clapping soundz
  • on the cash desk -> shop payments with dropping coins
  • on the printer -> before the print window opens -> typing sounds
  • in the lobby -> squeaking door sounds after logins
  • on Twitter -> twitter king widget having new Messages

There are tons of other places where it would be nice to do it with Mandy. Have fun!
You can download the tutorial code here:

mandy_sound.zip mandy_sound.zip (67.83 KB)

or visit the demo site 

5 Comments to Add Sound Effects to HTML with Javascript and Flash

  1. abe's Gravatar abe
    28.02.2009 at 9:55

    i tried to integrate your script with another that I have on same webpage. I am trying to add sound to an effect that explodes a page element. I am using the jquery ui effects explode plugin. The both seem to conflict with each other do you think that this maybe because they share the same variable names?

  2. 30.07.2007 at 9:43

    Es ist ein gutes Script was auch super funktioniert. Leider habe ich bei der Umprogrammierung ein Problem:

    Ich möchte das Script gerne auf 8 Buttons anwenden. Nun soll bei jedem Button (1…8) ein bestimmter Ton erzeugt werden (Button1 – Ton1, Button2 – Ton2 usw.)

    Gibt es jemanden, der mir Tipps zum Umprogrammieren geben kann?

    LG
    Volker

  3. 12.05.2007 at 15:20

    Mandy is cool Man!
    Aber die Sounds auf der Demo Seite sind relativ leise…. mußte ert meinen Krach ausmachen bis ich gemerkt habe dass es funzt :)

  4. 12.05.2007 at 10:17

    Kennst du das von Script.aculo.us ?

    Sound.play(‚blah.mp3′);

    http://mir.aculo.us/2007/3/12/script-aculo-us-1-7-1-beta