Last week, we created a generic timer using canvas and the setInterval function. This week, we will add some audio elements and stylize the application using CSS3. This timer is going to have an optional ticking sound for each second that elapses and an alarm sound when it has expired.Adding sounds in HTML5 is done by defining elements with the <audio> tag. We’ll need to define a couple of them for our sounds without the controls attribute.<audio id="clockTick" preload="auto">

<source src="audio/tick.mp3" type="audio/mpeg" />

<source src="audio/tick.wav" type="audio/wav" />

audio tag not supported.

</audio><audio id="alarm" preload="auto">

<source src="audio/alarm.mp3" type="audio/mpeg" />

<source src="audio/alarm.wav" type="audio/wav" />

</audio>Next we’ll add a helper function to play the sounds.function playSoundById(elementId) {

document.getElementById(elementId).play();

}Since the ticking sound is optional, users will be able to turn it off with a button that toggles.<div><input id="muteButton" type=button value="Mute" style="width:97px; font-weight:bold" onClick="muteClock()" ></div>function muteClock() {

clockMuted = !clockMuted;

if (clockMuted == true) {

muteButton.value = "Un-Mute";

return;

}

muteButton.value = "Mute";

}The last step for the sounds is to make calls to the helper function that we created. The ticking sound should be called from inside the setInterval function and the alarm sound will be called from inside the finish() function.if (!clockMuted) {

playSoundById('clockTick');

}playSoundById('alarm');Last week, we built the interface using a simple html table. This week, we have removed the table and now rely on CSS to position the elements. This gives us a bit more flexibility for the positioning of elements as well as the styling.<div id="container">

<section id="displaySection">

<div class="time">

<input id="elapsedTime" value="0:00:00" readonly="readonly">

</div>

<div id="clock">

<canvas id="canvas" width="100" height="100">

Your browser does not support the canvas tag

</canvas>

<div class="controls">

<div><input name="starter" type=button value="Start" style="width:97px; font-weight:bold" onClick="startClock()" ></div>

<div><input name="pauser" type=button value="Pause" style="width:97px; font-weight:bold" onClick="pauseClock()" ></div>

<div><input name="resetter" type=button value="Reset" style="width:97px; font-weight:bold" onClick="resetClock()" ></div>

<div><input id="muteButton" type=button value="Mute" style="width:97px; font-weight:bold" onClick="muteClock()" ></div>

</div>

</div>

</section>

<section id="settingSection">

<div class="settings">

<input id="hours" placeholder="hh" type="number" value="" onkeypress="validate(event)" />

<input id="minutes" placeholder="mm" type="number" value="" onkeypress="validate(event)" />

<input id="seconds" placeholder="ss" type="number" value="" onkeypress="validate(event)" />

</div>

</section>

</div>And with a bit of CSS, our timer looks like the following.

You can see the CSS for our timer by viewing the source of the demo, although I would encourage you to experiment with some different styles of your own.