-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
78 lines (78 loc) · 3.17 KB
/
index.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>
<head>
<title>Web audio API</title>
<meta charset="UTF-8" />
<script>
window.addEventListener('error', function (event) {
let msg = document.createElement('p');
msg.textContent = event.message || 'Failed to load ' + event.target.src;
document.getElementById('log').appendChild(msg);
}, true);
window.addEventListener('unhandledrejection', function (event) {
let msg = document.createElement('p');
msg.textContent = event.reason;
document.getElementById('log').appendChild(msg);
}, true);
</script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="menu">
<details open>
<summary>File / Edit:</summary>
<button data-type="save">Save</button>
<button data-type="load">Load</button>
<button data-type="reset">Reset</button>
<button data-type="buf">Audio Buffers</button>
</details>
<details open>
<summary>Inputs / Outputs:</summary>
<button data-node="cst">Constant Source</button>
<button data-node="osc">Oscillator</button>
<button data-node="buffer">Audio Buffer Source</button>
<button data-node="media">Media Element Source</button>
<button data-node="stream">Media Stream Source</button>
<button data-node="strdest">Media Stream Destination</button>
</details>
<details open>
<summary>Processing nodes:</summary>
<button data-node="gain">Gain</button>
<button data-node="delay">Delay</button>
<button data-node="stereo">Stereo Panner</button>
<button data-node="panner">Panner</button>
<button data-node="biquad">Biquad Filter</button>
<button data-node="iir">IIR Filter</button>
<button data-node="compr">Dynamics Compressor</button>
<button data-node="conv">Convolver</button>
<button data-node="shaper">Wave Shaper</button>
<button data-node="split">Channel Splitter</button>
<button data-node="merger">Channel Merger</button>
<button data-node="analy">Analyser</button>
</details>
</div>
<div id="graph">
<div id="container">
<svg></svg>
</div>
</div>
<div id="log"></div>
<div id="param" style="max-height: 10em">
<div>
<button>Add param</button>
<input type="number" value="60" min="0" step="any" class="small" /> bpm
<img src="icons.svg#stop" data-type="stop">
<img src="icons.svg#play" data-type="start">
</div>
<div></div>
</div>
<div id="dialog">
<form></form>
</div>
<iframe id="mdninfo"></iframe>
<script src="scripts/nodes.js"></script>
<script src="scripts/core.js"></script>
<script src="scripts/dialog.js"></script>
<script src="scripts/ui.js"></script>
</body>
</html>