cmaxreilly.github.io/synth.html at main · cmaxreilly/cmaxreilly.github.io · 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
<!DOCTYPE html>

<html>
    <title>
        Experiment with modular synthesizer
    </title>

    <head>
        <link href="css/styles.css" rel ="stylesheet" type="text/css" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body >
        <div id="nav-placeholder"></div>
        <main>
            <script>
                document.addEventListener("DOMContentLoaded", function() {
                    fetch("nav.html")
                    .then(response => response.text())
                    .then(data => {
                        document.getElementById("nav-placeholder").innerHTML = data;
                    });
                });
            </script>
            <script src="synth.js"></script>
            <button id="start">Start</button>
            <button id="stop">Stop</button>
            <br>
            <span>Master Volume</span>
            <input type="range" id="volume-control" min="0" max="1" step="0.05" value="0.1"><br>
            <input type="radio" id="sin-wave" name="waveform" value="sine" checked>
            <label for="sin-wave">Sine Wave</label>
            <input type="radio" id="square-wave" name="waveform" value="square">
            <label for="square-wave">Square Wave</label><br>
            <input type="radio" id="triangle-wave" name="waveform" value="triangle">
            <label for="triangle-wave">Triangle Wave</label>
            <input type="radio" id="sawtooth-wave" name="waveform" value="sawtooth">
            <label for="sawtooth-wave">Sawtooth Wave</label>
            <article>
                The idea for this synthesizer was stolen from Rick Moore over at Geek Culture. Thank you Rick for your wonderful tutorial!<br>
                <a href="https://medium.com/geekculture/building-a-modular-synth-with-web-audio-api-and-javascript-d38ccdeca9ea">
Here is     a link to the original article</a>
            </article>
        </main>
        <footer><span>&copy;</span>C. Maxwell Reilly, 2024</footer>
    </body>
</html>