DeeHtml with sound

fstrahberger

2.20/5 (5 votes)

Sep 25, 2007

CPOL

19899

125

Adding sound effects to the DeeHtml game.

Download source code - 142 KB

Screenshot - deehtml.gif

Introduction

This article is based on the work from user_pk001, who created a platform game using HTML and JavaScript - brilliant work! But one thing is missing: Sound!

Adding sound effects

First, I inserted a reference to the JavaScript "playSound" file in the head section of the document "opiframe1.html".

<head>
...
<script type="text/javascript" src="playSound.js"></script>
...
</head>

The file "playSound.js" is used to play some sounds using different *.wav files. The *.wav files are located in the engine folder of the platform game. Here is the code to play sounds:

if (window.attachEvent)
    window.attachEvent("onload", setupPlaySound);
else
    window.addEventListener("load", setupPlaySound, false); 

function setupPlaySound()
{
    if (navigator.appName == "Microsoft Internet Explorer")
    {
        var snd = document.createElement("bgsound");
        document.getElementsByTagName("body")[0].appendChild(snd);
        playSound = function(url)
        {
            snd.src = url;
        }
    }
    else
      {
        playSound = function(url)
        {
            var obj = document.createElement("object");
            obj.width="0px";
            obj.height="0px";
            obj.type = "audio/x-wav";
            obj.data = url;
            var body = document.getElementsByTagName("body")[0];
            body.appendChild(obj);
        }
    }
}

Next, we have to identify some events when to play sounds. Let's play a sound when the player collects a gold coin. The best place to do this is in the function "UpdateGoldctr":

function UpdateGoldctr(coinid1)
{
   coinid1obj=null;
   if(coinid1!="")
   {
       coinid1obj=mainScreenDoc.getElementById(coinid1);
       coinid1obj.src=eblanks;
       scoreScreenDoc.getElementById("goldctr").innerHTML=
         parseInt(scoreScreenDoc.getElementById("goldctr").innerHTML)+1;
       playSound("gold.wav");
       bisdead[Level_Objects_Array[coinid1obj.id][2]]=1;    
   }
}

Then we add some sound when the hero dies:

function updateLives(lvalupd1) {
    oPLivesLeft+=lvalupd1;
    if(oPLivesLeft>-1)
    {scoreScreenDoc.getElementById('livesctr').innerHTML=oPLivesLeft;}
    playSound("dead.wav");
}

That's it!