coloco el intervalo de tiempo = 1000 .- suena y dibuja a la vez
coloco el intervalo de tiempo = 500 .- :(
la idea es que suene(tic) y dibuje a la vez
aca esta el sonido
https://mega.nz/#!E0ByEL7a!qbQWPvA_KzHx4XfqYrAyaOjCrkB8BTSRK8A4tog ITZY
y este es el html con js
-------------------------------------------------------------------------------------------
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>The Canvas Tag</TITLE>
<SCRIPT>
var x_pos;
function drawOnCanvas() {
var canvas = document.getElementById("canvas_1");
canvas_context = canvas.getContext("2d");
doTimer();
}
function moveBox() {
canvas_context.beginPath();
canvas_context.moveTo(20,20);
canvas_context.lineTo(20,30);//1
canvas_context.lineTo(30,30);//2
canvas_context.lineTo(30,20);//3
canvas_context.lineTo(20,20);//4
canvas_context.moveTo(25,25);
canvas_context.lineTo(25,35);//5
canvas_context.lineTo(35,35);//6
canvas_context.lineTo(35,25);//7
canvas_context.lineTo(25,25);//8
canvas_context.moveTo(30,20);
canvas_context.lineTo(35,25);
canvas_context.moveTo(20,20);
canvas_context.lineTo(25,25);
canvas_context.moveTo(35,35);
canvas_context.lineTo(30,30);
canvas_context.moveTo(20,30);
canvas_context.lineTo(25,35);
x_pos = x_pos + 1;
if ( x_pos == 1 ){
canvas_context.moveTo(200,200);
canvas_context.lineTo(200,300);}
else if ( x_pos == 2 ){
canvas_context.moveTo(200,300);
canvas_context.lineTo(300,300);}
else if ( x_pos == 3 ){
canvas_context.moveTo(300,300);
canvas_context.lineTo(300,200);}
else if ( x_pos == 4 ){
canvas_context.moveTo(300,200);
canvas_context.lineTo(200,200);}
else if ( x_pos == 5 ){
canvas_context.moveTo(250,250);
canvas_context.lineTo(250,350);}
else if ( x_pos == 6 ){
canvas_context.moveTo(250,350);
canvas_context.lineTo(350,350);}
else if ( x_pos == 7 ){
canvas_context.moveTo(350,350);
canvas_context.lineTo(350,250);}
else if ( x_pos == 8 ){
canvas_context.moveTo(350,250);
canvas_context.lineTo(250,250);}
else if ( x_pos == 9 ){
canvas_context.moveTo(300,200);
canvas_context.lineTo(350,250);}
else if ( x_pos == 10 ){
canvas_context.moveTo(200,200);
canvas_context.lineTo(250,250);}
else if ( x_pos == 11 ){
canvas_context.moveTo(350,350);
canvas_context.lineTo(300,300);}
else if ( x_pos == 12 ){
canvas_context.moveTo(200,300);
canvas_context.lineTo(250,350);}
canvas_context.stroke();
document.getElementById('sonido').play();
}
function doTimer() {
x_pos = 0;
var b= document.getElementById('tiempo').value;
t = setInterval('moveBox()', b);
}
</SCRIPT>
</HEAD>
<BODY>
<SECTION style="border-style: solid; border-width: 2px; width: 500px;">
<CANVAS WIDTH="400" HEIGHT="400" ID="canvas_1">
Canvas tag not supported
</CANVAS>
</SECTION>
<audio id="sonido" src="reloj.wav">
</audio>
timer intervalo
<input type="text" id="tiempo"/>
<button onclick="drawOnCanvas()">ejecutar</button>
</BODY>
</HTML>
-----------------------------------------------------------------------------------------------
