-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
177 lines (156 loc) · 7.34 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
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="origin-trial" data-feature="AudioWorklet" data-expires="2018-01-27" content="ArOoNTa+dX8OXYD95xliibaCxzUTBxilqcXLAxKOXxf/qU2n09ry4XqX4ShkkqKgfzwwuSE2I7GqxGqvVi9aewwAAABUeyJvcmlnaW4iOiJodHRwczovL2ZhdXN0LmdyYW1lLmZyOjQ0MyIsImZlYXR1cmUiOiJBdWRpb1dvcmtsZXQiLCJleHBpcnkiOjE1MTcwMjQ1OTl9">
<title>Faust Editor</title>
<link rel=stylesheet href="src/codemirror/theme/eclipse.css"> <!-- customized -->
<link rel=stylesheet href="node_modules/codemirror/lib/codemirror.css">
<link rel=stylesheet href="node_modules/codemirror/addon/hint/show-hint.css">
<link rel=stylesheet href="css/docs.css">
<link rel=stylesheet href="css/editor.css">
<link rel=stylesheet href="css/tippy.css">
<link rel=stylesheet href="css/faust.css">
<script type="module">
import "@fortawesome/fontawesome-free/js/all"
</script>
</head>
<body>
<div class="application">
<div class="logozone"><img src="faust-logo.png" width=58px alt="LOGO"></div>
<div class="actionzone">
<div role=button class="dynamic-button" id="run" title="(CTRL-R) Compile and run the Faust program">
<i class="fa fa-play" aria-hidden="true"></i>
</div>
<div role=button class="action-button" id="upload" title="Upload/Edit a local file" onclick="loadFaustCode()">
<i class="fa fa-upload" aria-hidden="true"></i>
</div>
<div role=button class="action-button" id="save" title="Download/Save as a local file" onclick="saveFaustCode()">
<i class="fa fa-download" aria-hidden="true"></i>
</div>
<div role=button class="action-button" id="doc" title="(CTRL-D) Open the online documentation" onclick="faustDocumentation()">
<i class="fa fa-book" aria-hidden="true"></i>
</div>
<div role=button class="dynamic-button" id="export" title="Export/compile to specific plateform binary code">
<i class="fa fa-truck" aria-hidden="true"></i>
</div>
<div role=button class="dynamic-button" id="block" title="View the block diagram">
<i class="fa fa-image" aria-hidden="true"></i>
</div>
<div role=button class="action-button" id="config" title="Configure running mode" onclick="openConfigDialog()">
<i class="fa fa-wrench" aria-hidden="true"></i>
</div>
<div>
</div>
<form method="POST" name="menu" class="action-select" title="Activate MIDI polyphonic mode">
<select id="selectedPoly" name="selectedPoly" onChange="setPoly(this.form.selectedPoly)">
<option value=ON> ON </option>
<option selected value=OFF> OFF </option>
</select>
</form>
</div>
<div id="myDropZone" class="dropzone" title="Drop a Faust file to edit">
<input id="filename" contenteditable="true" value="untitled.dsp" />
</div>
<div class="editionzone">
<textarea id="myTextarea">
import("stdfaust.lib");
process = +;</textarea>
</div>
</div>
<input type="file" id="fileinput" style="display:none" />
<div class="modalwrapper" id="faustuiwrapper">
<span class="closeBtn" onclick="stopFaustCode()">×</span>
<div class="faustui" id="faust-ui"></div>
</div>
<div class="modalwrapper" id="exportwrapper">
<span class="closeBtn" onclick="closeExportDialog()">×</span>
<div class="exportui" id="exportui">
<h1>Export Faust Code</h1>
<input id="exportUrl" contenteditable="true" value="https://faustservicecloud.grame.fr" onkeyup="onEnterKey()" />
<select id="Platform" onChange="changeArchs()"></select>
<select id="Architecture" onChange="deleteQrCode()"> </select>
<div id="exportButton" role=button class="export-button" onclick="exportFaustSource()">
Export
</div>
<div id="qrDiv">
<div id="loader">
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
</div>
</div>
</div>
</div>
<div class="modalwrapper" id="configwrapper">
<span class="closeBtn" onclick="closeConfigDialog()">×</span>
<div class="configui" id="configui">
<h1>Configure Running Mode</h1>
<div class="config">
<div class="config-element">
<H3>Buffer size</H3>
<form method="POST" name="menu">
<select id="selectedBuffer" name="selectedBuffer" onChange="setBufferSize(this.form.selectedBuffer)">
<option value=128> 128 </option>
<option value=256> 256 </option>
<option value=512> 512 </option>
<option selected value=1024> 1024 </option>
<option value=2048> 2048 </option>
<option value=4096> 4096 </option>
<option value=8192> 8192 </option>
</select>
</form>
<p>You can change the buffer size (from 256 to 8192 frames in ScripProcessor mode, it will be fixed at 128 frames
in AudioWorklet mode).</p>
</div>
<div class="config-element">
<H3>Polyphonic instrument</H3>
<form method="POST" name="menu">
<select id="polyVoices" name="polyVoices" onChange="setPolyVoices(this.form.polyVoices)">
<option value=1> 1 </option>
<option value=2> 2 </option>
<option value=4> 4 </option>
<option value=8> 8 </option>
<option selected value=16> 16 </option>
<option value=32> 32 </option>
<option value=64> 64 </option>
<option value=128> 128 </option>
</select>
</form>
<p>Assuming your DSP code is <a href="https://faust.grame.fr/news/2016/01/13/polyphonic-instruments.html ">polyphonic
ready</a>, you can activate the polyphonic mode, adjust the number of available voices, and test it with a MIDI
device or application (usable with Chrome which implements the <a href="https://webaudio.github.io/web-midi-api/">Web
MIDI API</a>).
</div>
<div class="config-element">
<H3>ScriptProcessor/AudioWorklet</H3>
<form method="POST" name="menu">
<select id="selectedRenderingMode" name="selectedRenderingMode" onChange="setRenderingMode(this.form.selectedRenderingMode)">
<option selected value=ScriptProcessor> ScriptProcessor </option>
<option value=AudioWorklet> AudioWorklet </option>
</select>
</form>
<p>ScriptProcessor: audio rendering is done using the old ScriptProcessor model</p>
<p>AudioWorklet: audio rendering is done using the new AudioWorklet model. This can only be tested with Chrome
Canary for now, be sure to <a href="https://googlechromelabs.github.io/web-audio-samples/audio-worklet/">activate
it</a>
<p>
</div>
<p> <input id="dspstorage" type="checkbox" onclick="setDSPStorage(checked)"> <B>Save DSP control parameters state</B>
</p>
<p> <input id="sourcestorage" type="checkbox" onclick="setSourceStorage(checked)"> <B>Save DSP source</B> </p>
</div>
</div>
</div>
<script type="module">
import { changeArchs, deleteQrCode, onEnterKey } from "./src/exportUI";
import { closeConfigDialog, closeExportDialog, exportFaustSource, faustDocumentation, loadFaustCode, openConfigDialog, saveFaustCode, stopFaustCode } from "./src/faustlive";
import { setBufferSize, setDSPStorage, setPoly, setPolyVoices, setRenderingMode, setSourceStorage } from "./src/runfaust";
Object.assign(window, {
changeArchs, deleteQrCode, onEnterKey,
closeConfigDialog, closeExportDialog, exportFaustSource, faustDocumentation, loadFaustCode, openConfigDialog, saveFaustCode, stopFaustCode,
setBufferSize, setDSPStorage, setPoly, setPolyVoices, setRenderingMode, setSourceStorage,
})
</script>
</body>
</html>