187 lines
9.8 KiB
HTML
187 lines
9.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<title>Glissandos</title>
|
||
|
|
<style type="text/css">
|
||
|
|
.BtGliss{
|
||
|
|
color: #FFFFFF;
|
||
|
|
border: 1px solid #6d0019;
|
||
|
|
text-decoration:none;
|
||
|
|
text-shadow: 0px 1px 0px #ffffff;
|
||
|
|
background-color: linear-gradient(to bottom, #a90329 -50%, #6d0019 100%) repeat scroll 0% 0% transparent;
|
||
|
|
}
|
||
|
|
.BtGliss:hover{
|
||
|
|
color: #000000;
|
||
|
|
border: 1px solid #a90329;
|
||
|
|
background-color: linear-gradient(to bottom, #6d0019 -50%, #a90329 100%) repeat scroll 0% 0% transparent;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body style="background-color: black;">
|
||
|
|
<div id="contagem" style="color: yellow; position: fixed; left: 20px;">0</div>
|
||
|
|
<div id="relogio" style="color: greenyellow; font-size: 40px; position: fixed; left: 750px;"></div>
|
||
|
|
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 20px; top: 50px;" onclick="glissando(310,80,120,3), cronometro()">Glissando Inicial</button>
|
||
|
|
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 20px; top: 100px;" onclick="glissando(60,600,60,3)">Glissando asc. abrindo - 60s</button>
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 270px; top: 100px;" onclick="glissando(120,550,40,3)">Glissando asc. abrindo - 40s</button>
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 520px; top: 100px;" onclick="glissando(55,660,20,2)">Glissando asc. abrindo - 20s</button>
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 770px; top: 100px;" onclick="glissando(220,990,10,2)">Glissando asc. abrindo - 10s</button>
|
||
|
|
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 20px; top: 130px;" onclick="glissando(660,80,60,3)">Glissando desc. abrindo - 60s</button>
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 270px; top: 130px;" onclick="glissando(520,110,40,3)">Glissando desc. abrindo - 40s</button>
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 520px; top: 130px;" onclick="glissando(700,55,20,2)">Glissando desc. abrindo - 20s</button>
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 770px; top: 130px;" onclick="glissando(1100,200,10,2)">Glissando desc. abrindo - 10s</button>
|
||
|
|
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 20px; top: 180px;" onclick="glissando(60,600,60,1)">Glissando asc. fechando - 60s</button>
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 270px; top: 180px;" onclick="glissando(120,550,40,1)">Glissando asc. fechando - 40s</button>
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 520px; top: 180px;" onclick="glissando(55,440,20,1)">Glissando asc. fechando - 20s</button>
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 770px; top: 180px;" onclick="glissando(220,990,10,1)">Glissando asc. fechando - 10s</button>
|
||
|
|
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 20px; top: 210px;" onclick="glissando(600,85,60,1)">Glissando desc. fechando - 60s</button>
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 270px; top: 210px;" onclick="glissando(550,100,40,1)">Glissando desc. fechando - 40s</button>
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 520px; top: 210px;" onclick="glissando(770,80,20,1)">Glissando desc. fechando - 20s</button>
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 770px; top: 210px;" onclick="glissando(1000,160,10,1)">Glissando desc. fechando - 10s</button>
|
||
|
|
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 20px; top: 260px;" onclick="glissando(60,600,60,0)">Glissando asc. cruzando - 60s</button>
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 270px; top: 260px;" onclick="glissando(120,550,40,0)">Glissando asc. cruzando - 40s</button>
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 520px; top: 260px;" onclick="glissando(55,660,20,0)">Glissando asc. cruzando - 20s</button>
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 770px; top: 260px;" onclick="glissando(220,990,10,0)">Glissando asc. cruzando - 10s</button>
|
||
|
|
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 20px; top: 290px;" onclick="glissando(660,85,60,0)">Glissando desc. cruzando - 60s</button>
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 270px; top: 290px;" onclick="glissando(500,100,40,0)">Glissando desc. cruzando - 40s</button>
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 520px; top: 290px;" onclick="glissando(750,80,20,0)">Glissando desc. cruzando - 20s</button>
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 770px; top: 290px;" onclick="glissando(990,160,10,0)">Glissando desc. cruzando - 10s</button>
|
||
|
|
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 20px; top: 400px;" onclick="glissando(0,0,50,3)">Glissando aleatório abrindo - 50s</button>
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 300px; top: 400px;" onclick="glissando(0,0,30,3)">Glissando aleatório abrindo - 30s</button>
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 580px; top: 400px;" onclick="glissando(0,0,10,2)">Glissando aleatório abrindo - 10s</button>
|
||
|
|
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 20px; top: 450px;" onclick="glissando(0,0,50,1)">Glissando aleatório fechando - 50s</button>
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 300px; top: 450px;" onclick="glissando(0,0,30,1)">Glissando aleatório fechando - 30s</button>
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 580px; top: 450px;" onclick="glissando(0,0,10,1)">Glissando aleatório fechando - 10s</button>
|
||
|
|
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 20px; top: 500px;" onclick="glissando(0,0,50,0)">Glissando aleatório cruzando - 50s</button>
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 300px; top: 500px;" onclick="glissando(0,0,30,0)">Glissando aleatório cruzando - 30s</button>
|
||
|
|
<button type="BtGliss" style="position: fixed; left: 580px; top: 500px;" onclick="glissando(0,0,10,0)">Glissando aleatório cruzando - 10s</button>
|
||
|
|
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
function cronometro() {
|
||
|
|
|
||
|
|
document.getElementById("relogio").innerHTML = "00:00";
|
||
|
|
|
||
|
|
var ss = 1; // ---------------------------- cronometro ------
|
||
|
|
var m = 0;
|
||
|
|
var crono;
|
||
|
|
|
||
|
|
relogio = window.setInterval(function() {
|
||
|
|
if (ss == 60) { m++; ss = 0; };
|
||
|
|
if (m == 60) { h++; ss = 0; m = 0; };
|
||
|
|
if (m < 10) { crono = "0" + m + ":"; } else { crono = m + ":"; };
|
||
|
|
if (ss < 10) { crono += "0" + ss; } else { crono += ss; };
|
||
|
|
|
||
|
|
document.getElementById("relogio").innerHTML = crono;
|
||
|
|
ss++;
|
||
|
|
|
||
|
|
if (m >= 15) { window.clearInterval(relogio); };
|
||
|
|
|
||
|
|
},1000);
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
function glissando(freq1,freq2,t3,tipo) {
|
||
|
|
if (freq1 == 0) { freq1 = Math.floor(Math.random() * 900 + 50); };
|
||
|
|
if (freq2 == 0) { freq2 = Math.floor(Math.random() * 900 + 50); };
|
||
|
|
|
||
|
|
var s = t3; // --------------------------- visualização da duração do glissando ----
|
||
|
|
if (s < 10) {document.getElementById("contagem").innerHTML = freq1+"Hz a "+freq2+"Hz em 0" + s + " s";}
|
||
|
|
else {document.getElementById("contagem").innerHTML = freq1+"Hz a "+freq2+"Hz em " + s + " s";};
|
||
|
|
|
||
|
|
var cont = window.setInterval(function() {
|
||
|
|
s--;
|
||
|
|
if (s < 10) {document.getElementById("contagem").innerHTML = freq1+"Hz a "+freq2+"Hz em 0" + s + " s";}
|
||
|
|
else {document.getElementById("contagem").innerHTML = freq1+"Hz a "+freq2+"Hz em " + s + " s";};
|
||
|
|
|
||
|
|
if (s <= 0) { window.clearInterval(cont); };
|
||
|
|
},1000);
|
||
|
|
|
||
|
|
var ac; // ----------- synth -----
|
||
|
|
var osc = [], filt = [], vca = [];
|
||
|
|
var t2 = t3 * 0.7, t1 = t3/100;
|
||
|
|
var vol = 0.2;
|
||
|
|
|
||
|
|
if (tipo == 2 || tipo == 3) {var t0 = t3*(0.08*tipo); var t4 = t3*0.99;} else {var t0 = 0; var t4 = t3*(1-(0.1*(tipo+1)));};
|
||
|
|
|
||
|
|
try { ac = new (window.AudioContext || window.webkitAudioContext)();
|
||
|
|
} catch (error) { window.alert(`Seu navegador não suporta Web Audio API!`);}
|
||
|
|
|
||
|
|
if (ac !== undefined) {
|
||
|
|
|
||
|
|
for (var i=0;i<24;i++) {
|
||
|
|
var co1 = (Math.random()*100)*(i+1);
|
||
|
|
var co2 = (Math.random()*100)*(i+1);
|
||
|
|
var co3 = (Math.random()*100)*(i+1);
|
||
|
|
var co4 = (Math.random()*100)*(i+1);
|
||
|
|
filt[i] = ac.createBiquadFilter();
|
||
|
|
filt[i].type = "lowpass";
|
||
|
|
filt[i].frequency.setValueAtTime(100, ac.currentTime);
|
||
|
|
filt[i].frequency.exponentialRampToValueAtTime(co1, ac.currentTime + t1);
|
||
|
|
filt[i].frequency.exponentialRampToValueAtTime(co2, ac.currentTime + (t2/4));
|
||
|
|
filt[i].frequency.exponentialRampToValueAtTime(co3, ac.currentTime + t2);
|
||
|
|
filt[i].frequency.exponentialRampToValueAtTime(co4, ac.currentTime + t3);
|
||
|
|
filt[i].gain.setValueAtTime(25, ac.currentTime);
|
||
|
|
filt[i].Q.setValueAtTime(3, ac.currentTime);
|
||
|
|
filt[i].connect(ac.destination);
|
||
|
|
|
||
|
|
vca[i] = ac.createGain();
|
||
|
|
vca[i].gain.value = 0;
|
||
|
|
vca[i].connect(filt[i]);
|
||
|
|
vca[i].gain.setValueAtTime(0, ac.currentTime);
|
||
|
|
vca[i].gain.linearRampToValueAtTime(0.6*vol, ac.currentTime + t1 +(i/100));
|
||
|
|
vca[i].gain.linearRampToValueAtTime(0.5*vol, ac.currentTime + t1 * 2);
|
||
|
|
vca[i].gain.linearRampToValueAtTime(0.35*vol, ac.currentTime + t2);
|
||
|
|
vca[i].gain.linearRampToValueAtTime(0.6*vol, ac.currentTime + t3 * 0.9);
|
||
|
|
vca[i].gain.linearRampToValueAtTime(0, ac.currentTime + t3);
|
||
|
|
|
||
|
|
|
||
|
|
if (tipo == 0) {
|
||
|
|
var fd1 = freq1+(freq1/20)*i; // cluster inicial
|
||
|
|
var fd2 = fd1; // cluster intermediário
|
||
|
|
var fd3 = freq2-(freq2/20)*i; // cluster final
|
||
|
|
} else
|
||
|
|
if (tipo == 1) {
|
||
|
|
var fd1 = freq1+(freq1/20)*i; // cluster inicial
|
||
|
|
var fd2 = fd1; // cluster intermediário
|
||
|
|
var fd3 = freq2; } else // uníssono final
|
||
|
|
if (tipo == 2 || tipo == 3) {
|
||
|
|
var fd1 = freq1; // uníssono final
|
||
|
|
var fd2 = freq1-(((fd1-freq2)/300)*i)+(((fd1-freq2)/300)*11); // cluster intermediário
|
||
|
|
var fd3 = freq2-((fd1-freq2)/100)*i; // cluster final
|
||
|
|
};
|
||
|
|
if (fd3 < 25) { fd3 = ((25 - fd3)/2) + 25;};
|
||
|
|
|
||
|
|
osc[i] = ac.createOscillator();
|
||
|
|
osc[i].connect(vca[i]);
|
||
|
|
osc[i].type = "sawtooth";
|
||
|
|
osc[i].frequency.setValueAtTime(fd1, ac.currentTime);
|
||
|
|
osc[i].frequency.exponentialRampToValueAtTime(fd2, ac.currentTime + t0);
|
||
|
|
osc[i].frequency.exponentialRampToValueAtTime(fd3, ac.currentTime + t4);
|
||
|
|
osc[i].start(ac.currentTime);
|
||
|
|
osc[i].stop(ac.currentTime + t3 + 0.01);
|
||
|
|
};
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|