Different Ways to Play a Sound from a Web Page

Back to menu

4. Controlling an Embedded Sound using JavaScript (New)

A minor variation on method 3 is to use the JavaScript getElementById() function in the EvalSound definition. This is actually the preferred method for recent browsers, but is not supported by older versions. The function and the sound object then becomes:

<script>
function EvalSound(soundobj) {
  var thissound=document.getElementById(soundobj);
  thissound.Play();
}
</script>

<embed src="success.wav" autostart=false width=1 height=1 id="sound1"
enablejavascript="true">

Note that we specify name of the embedded sound using its ID attribute now. The function calls however are the same as above. For example:

<form>
<input type="button" value="Play Sound" onClick="EvalSound('sound1')">
</form>

Compatibility: Internet Explorer, Firefox, Opera, Chrome.

Thanks to Chris Rolfe for discovering that width and height need to be > 0 for Firefox on MacOS.

Increasing compatibility with Real Player

Methods 3 and 4 expect that the embedded object has a method called "Play()" which causes the audio object to replay. This is true of Windows Media Player and Apple Quicktime plug-ins, but not true of the Real Player plug-in. For some reason, the authors of Real Player called this function "DoPlay()" instead! Although it ought to be easy to write a JavaScript function that checks which method is available and calls Play() or DoPlay() accordingly, this very testing of the availability of a method is not very portable across browsers. This is the best that I have been able to come up with:

<script>
function EvalSound(soundobj) {
 var thissound= eval("document."+soundobj);
 try {
     thissound.Play();
 }
 catch (e) {
     thissound.DoPlay();
 }
}
</script>

Next method ...