Play Sound on Web Page

by mikechiu

Here are common ways to play sound on a web page, most of which don't work very well. Your best bet is to play the sound in a Flash file.

  1. Link to the sound. This doesn't actually play the sound until the user downloads it. No good!
    <a href="sound.wav">Play Sound</a>
  2. Embed the sound. This asks the user to open Windows Media Player in Internet Explorer. In Firefox, it asks the user to install Quicktime. No good!
    <embed src="sound.wav" autostart="true" loop="false" />
  3. Embed the sound with JavaScript. This also asks the user to open Windows Media Player in Internet Explorer and in Firefox, it asks the user to install Quicktime. No good!
    <embed src="sound.wav" autostart="true" id="sound" enablejavascript="true">
    <script>
    function playSound(id) {
      var sound = document.getElementById(id);
      sound.Play();
    }
    playSound('sound');
    </script>
  4. Use HTML5. Still not supported well by Internet Explorer 9.
    <audio id="audio" src="sound.wav" controls preload="auto" autobuffer></audio>
  5. Use custom Flash or Flash audio player. Bingo! These work for all browsers who have installed the Flash plugin and something like 98% of users have. To create custom Flash audio, drag your audio file into Flash, click on the first frame, set the audio to the file, and publish. You're done!

Something so simple isn't! Hopefully, we'll look back on this one day and wonder how we ever managed.

Categories
Updated May 23, 2011