plox/synth.html at main · HyperLan-git/plox · GitHub

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
<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <!-- XXX for local testing <link rel="stylesheet" href="./node_modules/drawflow/dist/drawflow.min.css">
    <script src="./node_modules/drawflow/dist/drawflow.min.js"></script>-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css">
    <script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
    <script src="./scripts/FX.js"></script>
    <script src="./scripts/FXUI.js"></script>
    <script src="./scripts/mod.js"></script>
    <script src="./scripts/synth.js"></script>
    <script src="./scripts/io.js"></script>
    <link rel="icon" type="image/x-icon" href="./images/favicon.ico">
    <title>HyperLan</title>
</head>

<body class="stop-scrolling">
    <button onclick="initAudio(); this.remove(); document.body.classList.remove('stop-scrolling');"
        style="width:100%; height: 50vw; font-size: x-large;">Enable</button><br>
    <div>
        <p id="play">
            Master fader <input type="range" id="fader" min="-40" max="0" step="0.1" value="-40"/><span id="fadervalue">-40 db</span><br>
            Octave <input type="number" value="4" id="octave" min="0" max="10" onchange="drawSynth(); for(let k in osc) stopNote(Number(k));"></input>&nbsp;
            <button onclick="get('octave').value = Number(get('octave').value) + 1;get('octave').dispatchEvent(new Event('change'));">+ 1</button>&nbsp;
            <button onclick="get('octave').value -= 1;get('octave').dispatchEvent(new Event('change'));">- 1</button><br>
            <canvas id="synth" style="min-width: 500px;" width="700" height="200"></canvas> <button onclick="get('play').requestFullscreen()">fullscreen</button>
        </p>
    </div>
    <div>
        <p>
            <br><canvas id="spectrum" width="700" height="300"></canvas>
            <br><canvas id="oscilloscope" width="700" height="300"></canvas>
            Draw? <input type="checkbox" onclick="drawOscilloscope=this.checked;" onchange="drawOscilloscope=this.checked;" id="drawosc" checked></input>
        </p>
    </div>
    <div>
        <p>
            New FX
            <select id="fxType">
                <option value="oscillator">Oscillator</option>
                <option value="gain">Gain</option>
                <option value="constant">Constant source</option>
                <option value="audiobuffersource">Audio buffer source</option>
                <option value="biquadfilter">FIR Filter</option>
                <!-- XXX <option value="filter">IIR Filter</option>-->
                <option value="distortion">Distortion</option>
                <option value="convolver">Convolver</option>
                <option value="delay">Delay</option>
                <option value="compressor">Compressor</option>
                <option value="stereopanner">Panner</option>
                <!--<option value="channelmerger">Channel merger</option>
                <option value="channelsplitter">Channel splitter</option>-->
                <option value="analyser">Frequency analyser/Oscilloscope</option><!-- XXX add loudness analyser? -->
                <!-- XXX <option value="stereo">Stereo field analyser</option>-->
            </select>
            <button onclick="addFx(get('fxType').value);">ADD</button>
        </p>
        <div id="drawflow" style="border-style: outset; background-color: grey; height: 500px; width: 99.65%;"></div>
        <p>
            <span id="fxEditor"></span><br>
            <select id="modIn"></select> -> <select id="modOut" onchange="getModUiParams()"></select> Param : <select id="modParam"></select><button onclick="addModulation(); updateModUI(fx.getAllNodes());">Add modulation</button>
        </p>
    </div>
    <table id="mod">
        <caption>Modulation matrix</caption>
        <colgroup>
            <col span="1" style="width: 10%;">
            <col span="1" style="width: 10%;">
            <col span="1" style="width: 20%;">
            <col span="1" style="width: 40%;">
            <col span="1" style="width: 20%;">
        </colgroup>
        <th>Label</th>
        <th>Input</th>
        <th>Output</th>
        <th>Amount</th>
        <th>Delete</th>
        <tbody id="modList"></tbody>
    </table>
    <div>
        <p>
            Programmable node: <button onclick="createWorklet();">ADD</button><br>
            Number of inputs: <input type="number" min="0" max="10" value="0" id="workletinputs"></input><br>
            Number of outputs: <input type="number" min="1" max="10" value="1" id="workletoutputs"></input><br>
            <!-- TODO fix syntax coloring -->
            <pre><code class="language-js" id="workletcode" style="width:98.5%; height: 20em; resize: none;" contenteditable="true">// Your arguments here are "inputs", "outputs" and "parameters"
const output = outputs[0];
// For every channel
for(let ch = 0; ch < output.length; ch++) {
  let channel = output[ch];
  // Fill the audio buffer
  for (let sample = 0; sample < channel.length; sample++) {
    // With random data (white noise)
    channel[sample] = Math.random() * 2 - 1;
  }
}
</code></pre>
            <p style="color:black; background-color: red; padding:0%" id="workleterror"></p>
        </p>
    </div>
    <div>
        <p>
            <button id="midi" onclick="initMIDI(); this.disabled = true;">ENABLE MIDI INPUT</button><br>
            <button id="export" onclick="export_all()">EXPORT</button>&nbsp;
            <button id="import" onclick="import_all()">IMPORT</button>
        </p>
    </div>
</body>