-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy pathbiquadOscillator.html
78 lines (63 loc) · 2.32 KB
/
biquadOscillator.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Oscillator + Biquad Filter</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<link href='styles.css' rel='stylesheet' type='text/css'>
</head>
<body>
<svg >
<g transform="translate(20,160)"/>
</svg>
<div id="title">
<h1>Demo for WebAudio-Hook</h1>
<p>The graph is generated automatically by hooking into Web Audio API functions.<br/>The panel on the top right is automatically generated by reflection of each node.</p>
<p>Click on the nodes and play with the values. It's loading a song, so it might take some time to load.</p>
</div>
</body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="dat.gui.min.js"></script>
<script src="dagre.js"></script>
<script src="parasitic-webaudio.js" ></script>
<script>
var AudioContext = AudioContext || webkitAudioContext;
var context = new AudioContext();
var analyser = context.createAnalyser();
analyser.fftSize = 256;
analyser.smoothingTimeConstant = .75;
var frequencyData = new Uint8Array( analyser.fftSize );
var canvas = document.createElement( 'canvas' ),
ctx = canvas.getContext( '2d' );
canvas.width = 1024;
canvas.height = 256;
canvas.style.border = '1px solid #666'
document.body.appendChild( canvas );
var source = context.createOscillator();
source.type = 0;
source.frequency.setValueAtTime( 200, 0 );
var filter = context.createBiquadFilter();
filter.type = 2;
filter.frequency.setValueAtTime( 100, 0 );
window.addEventListener( 'mousemove', function( e ) {
// filter.frequency.setValueAtTime( 2000 * e.clientX / window.innerWidth, context.currentTime + .1 );
// source.frequency.setValueAtTime( 2000 * e.clientY / window.innerHeight, context.currentTime + .1 );
} );
var gain = context.createGain();
gain.gain.value = 1;
source.connect( filter );
filter.connect( gain );
gain.connect( analyser );
analyser.connect( context.destination );
source.start( 0 );
function update() {
requestAnimationFrame( update );
analyser.getByteFrequencyData( frequencyData );
ctx.clearRect( 0, 0, canvas.width, canvas.height );
for( var j = 0, m = analyser.frequencyBinCount; j < m; j++ ) {
ctx.fillRect( j * ( canvas.width / m ), canvas.height, .5 * canvas.width / m, - frequencyData[ j ] * canvas.height / 255 );
}
}
update();
</script>
</html>