-
Notifications
You must be signed in to change notification settings - Fork 1
/
reVisualGLWebAudio.html
141 lines (109 loc) · 4.48 KB
/
reVisualGLWebAudio.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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html>
<head>
<title>WebAudio + WebGL</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link type="text/css" href="style.css" rel="stylesheet"/>
<script type="text/javascript" src="glMatrix095.js"></script>
<script type="text/javascript" src="webGL-utils.js"></script>
<script type="text/javascript" src="gl-preview.js"></script>
<script src="webAudioGlue.js"></script>
<script src="makeSamples.js"></script>
<script src="benmu-riff.js"></script>
<script src="benmu-dataurl.js"></script>
<script id="shader-fs" type="text/x-fragment">
precision mediump float;
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
void main(void) {
vec4 samples = texture2D(uSampler, vec2(vTextureCoord.t, vTextureCoord.s));
gl_FragColor = vec4(samples.r, 0.0, 0.0, 1.0);
}
</script>
<script id="shader-vs" type="text/x-vertex">
attribute vec2 aTextureCoord;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying vec2 vTextureCoord;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aTextureCoord,0.0,1.0);
vTextureCoord = aTextureCoord;
}
</script>
</head>
<body onload="webGLStart();">
<form onsubmit="return false;">
<input type="text" id="oneliner" value="t>>7|t>>22|t"/>
<!-- todo: figure out the CSS to avoid the need for the manual breaks -->
<br/><input type="checkbox" id='autoPlay' /> <label for="autoPlay">Automatically play</label>
<br/> <input type="checkbox" id='unsigned'/> <label for="unsigned">Treat samples as unsigned</label>
<br/><input type="checkbox" id='eightBit'/> <label for="autoPlay">Treat samples as 8-bit</label>
<br/>
<input type="button" value="Play" id="gen" onclick="play()" /> <input type="button" value="Stop" id="stop" onclick="stop()" />
</form>
<div id="error"></div>
<canvas id="canvas" width="256" height="1024"></canvas>
<canvas width="1024" height="512" id="canvas" ></canvas>
<p>[enter] play, [esc] stop</p>
<script>
var keyMap = {
13: function() { cbAutoPlay.checked = true; onPlayButton();},
27: function(){ cbAutoPlay.checked = false; stop(); oneLinerElt.focus();}
}; //keyMap
var sampleFunction = null;
var errDiv = document.getElementById("error");
var oneLinerElt = document.getElementById('oneliner');
var cbAutoPlay = document.getElementById("autoPlay");
cbAutoPlay.checked = false;
function updateAndPLayIfAutoPlayChecked() {
updateAndMaybePlay(cbAutoPlay.checked,true);
}
function onKey(event) {
var fn = keyMap[event.keyCode];
if(fn) fn();
else {
updateAndMaybePlay(cbAutoPlay.checked,false);
}
}
function updateFunction() {
var oneLiner = oneLinerElt.value;
sampleFunction = makeSampleFunction(oneLiner,errDiv);
}
function onPlayButton() {
updateAndMaybePlay(true,false);
}
var sampleData;
var lastOneLiner;
var lastAudioFunction;
function updateAndMaybePlay(playSound, forceUpdate) {
//updateFunction();
//if(!sampleFunction) return;
var oneLiner = oneLinerElt.value;
var recalc = (forceUpdate || oneLiner != lastOneLiner);
lastOneLiner = oneLiner;
functionParams.eightBit = document.getElementById('eightBit').checked;
functionParams.unsigned = document.getElementById('unsigned').checked;
var bitsFunction = functionParams.forBitmap.sampler(oneLiner);
lastAudioFunction = recalc ? functionParams.forAudio.sampler(oneLiner): lastAudioFunction;
if(playSound && lastAudioFunction) {
play(lastAudioFunction);
var audioTemp = new Float32Array(20);
lastAudioFunction(audioTemp,20,0);
}
if(recalc) {
sampleData = sampleData || new Uint8Array(256*1024);
bitsFunction(sampleData,256*1024,0);
var temp = sampleData.subarray(0,20);
gl.updateTexture8(sampleData);
drawScene();
}
}
document.getElementById("oneliner").focus();
// document.getElementById("oneliner").onkeyup = onKey;
document.onkeyup = onKey;
document.getElementById("gen").onclick = onPlayButton;
document.getElementById('eightBit').onchange = updateAndPLayIfAutoPlayChecked;
document.getElementById('unsigned').onchange = updateAndPLayIfAutoPlayChecked;
</script>
</body>
</html>