notes-reader/index.html at master · dfa1234/notes-reader · 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Notes Reader</title>
        <link rel="stylesheet" href="./water.min.css" />
        <link rel="stylesheet" href="./main.css" />
    </head>
    <body>
        <div class="container">
            <h1>Notes reader</h1>

            <button id="allow-microphone-capture">Open microphone</button>

            <p>
                <svg id="piano" width="1150" height="150"></svg>
            </p>

            <div id="app-wrapper" style="display: none">
                <audio id="microphone-capture"></audio>

                <ul>
                    <li>
                        Detected key:
                        <span id="note-display" class="key-detected mono"></span>
                    </li>
                    <li>
                        Captured pitch:
                        <span id="note-pitch" class="key-detected mono"></span>
                    </li>
                    <li>
                        Volume:
                        <span id="decibels" class="mono"></span>
                    </li>
                </ul>

                <canvas id="canvas" width="1024" height="300"></canvas>

                <div id="samples"></div>
            </div>
        </div>

        <script src="./app/start-modules.js" type="module"></script>
    </body>
</html>