Doors

Hva

Her legger vi på lyd når dørene åpnes og lukkes.

Vi legger demoen i en iFrame for å forenkle koden. Hvis du vil kan du se den i et eget vindu, og inspisere kildekoden:
doors2 https://borres.hiof.no/wep/js/ex/doors/doors2/doors2.html

Koden som handterer dørene er nå slik:

// measuring doors
var leftD=null;
var rightD=null;
var doorW=null;
var doorDelta=null;
var rightDoorLeft=null;
// parameters for dooranimation
var openWait=0;
var closeWait=0;
var steps=20;
var stepix=0;
// global flags 
var doorsAreOpen=false;
var doorsAreClosed=true;
function initDoors()
{
    leftD=document.getElementById("leftdoor");
    rightD=document.getElementById("rightdoor");
    doorW=parseInt(rightD.style.width);
    
    doorDelta=Math.round(doorW/20);
    rightDoorLeft=rightD.style.left;
    doorsAreClosed=true;
}
function measureSounds(){
    var op=document.getElementById("open");
    var cl=document.getElementById("close");
    openWait=op.duration*1000/steps;
    closeWait=cl.duration*700/steps; // corrected for silence
    console.log(op.duration,openWait,cl.duration,closeWait);
}
function startAnimation(){
    if(doorsAreClosed)
        openDoor();
    else
        closeDoor();
    measureSounds();
}

function openDoor()
{
    if(!doorsAreClosed)
        return;
    leftD.style.width=""+(doorW-(stepix*doorDelta))+"px";
    rightD.style.width=""+(doorW-(stepix*doorDelta))+"px";
    rightD.style.left=parseInt(rightD.style.left)+doorDelta+"px";
    
    doorsAreOpen=false;
    
    if(stepix==0)
        playOpen();
    
    stepix=stepix+1;
    if(stepix < steps)
        setTimeout(openDoor,openWait);
    else
    {
        doorsAreOpen=true;
        doorsAreClosed=false;
    }
}
function closeDoor()
{
    leftD.style.width=""+(doorW-(stepix*doorDelta))+"px";
    rightD.style.width=""+(doorW-(stepix*doorDelta))+"px";
    rightD.style.left=parseInt(rightD.style.left)-doorDelta+"px";
    
    if(stepix==steps)
        playClose();
    
    stepix=stepix-1;
    if(stepix > 0)
        setTimeout(closeDoor,closeWait);
    else
    {
        leftD.style.width=doorW+"px";
        rightD.style.width=doorW+"px";
        rightD.style.left=rightDoorLeft;
        doorsAreClosed=true;
    }
}
// sounds
function playOpen()
{
     var elt=document.getElementById("open");
     elt.play();
}
function playClose()
{
     var elt=document.getElementById("close");
     elt.play();
}

HTML koden har fått to audio-elementer:

<!DOCTYPE HTML>
<title>What</title>
<head>
    <meta charset="UTF-8"/>    
    <script src="doors2.js" type="text/javascript"> </script>
    <script src="../makeCanvas.js" type="text/javascript"> </script>
</head>
<body style="background-color:#FFFFC0">
    <div id="doors" onclick="startAnimation();">
        <!-- doorleft -->
        <img id="leftdoor"  src="../leftdoor.gif" style="width:100px;height:340px;
                 position:absolute; left:100px;top:20px; z-index:20;"/>
        <!-- doorright -->
        <img id="rightdoor"  src="../rightdoor.gif"  style="width:107px;height:340px;
                 position:absolute; left:200px;top:20px; z-index:20;"/>
    </div> 
    <!-- the canvas -->
    <div onclick="startAnimation();" 
         style="position:absolute;left:100px;top:110px;z-index:10">        
        <canvas id="glcanvas" width="200" height="240" 
                style="border-style:solid;border-width:1px" >              
        </canvas>
    </div>
    <!-- sound -->
    <audio id="open">
        <source src="../squeakOpen.mp3" type="audio/mp3"/>
        <source src="../squeakOpen.ogg" type="audio/ogg"/>
    </audio>    
    <audio id="close">
        <source src="../squeakClose.mp3" type="audio/mp3"/>
        <source src="../squeakClose.ogg" type="audio/ogg"/>
    </audio>
    <!-- set up -->
    <script>
        initDoors();
        drawFace("glcanvas");
    </script>
    
    </body>
    
</html>