web-audio-API-player/index.html at master · braindrain9/web-audio-API-player · 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
<!DOCTYPE html>
<html lang="en" class="h-100">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Audio Player</title>

        <!-- Bootstrap CSS -->
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
            crossorigin="anonymous"
        >
    </head>
    <body class="container h-100 w-100 bg-light">
        <div class="mx-auto col-lg-8">
            <div class="text-center">
                <img src="radio.png" class="img-fluid" alt="Radio" width="150px">
            </div>

            <form>
                <div class="p-2 border rounded-3 row">
                    <div class="col-12">
                        <h2>Welcome to <strong>Audio Player</strong>!</h2>
                        <p>
                            Please insert note code in the next format: <code>E4/4 A#4/16 D#4/8.</code>, <br />
                            where <code>E4</code> is a note in
                            <a href="https://en.wikipedia.org/wiki/Scientific_pitch_notation" target="_blank">
                                Scientific pitch notation
                            </a>,
                            <code>4</code> stands for <code>1/4</code> note length,
                            and there is a space between notes.
                        </p>
                        <p>
                            <strong><i>Star Wars - The Imperial March, 100 tempo</i>:</strong><br />
                            <code>
                                E4/4 E4/4 E4/4 D#4/8. A#4/16 E4/4 D#4/8. A#4/16 E4/2
                                D5/4 D5/4 D5/4 D#5/8. A#4/16 F#4/4 D#4/8. A#4/16 E4/2
                            </code>
                        </p>
                        <p>
                            <strong><i>Song about Father, 60 tempo:</i></strong><br />
                            <code>
                                D3/8 D3/8 A#3/8. A3/16 G3/8 G3/4.
                                A#3/8 A#3/8 C4/8 A#3/8 A3/4. A3/8
                                A3/8 A3/8 A3/8 A3/8 D4/8 C4/8 A#3/8 A3/8
                                A#3/4 A#3/8. A#3/16 D4/8 A#3/8
                            </code>
                        </p>
                    </div>
                    <div class="col-12 mb-1">
                        <label for="textarea" class="form-label">Note Code</label>
                        <textarea
                                class="form-control"
                                id="textarea"
                                rows="4"
                                autofocus
                        ></textarea>
                    </div>
                    <div class="col-12 mb-1">
                        <label for="textarea2" class="form-label">Additional Note Code</label>
                        <textarea class="form-control" id="textarea2" rows="2"></textarea>
                    </div>
                    <div class="col-lg-6 mb-1">
                        <label for="osctype" class="form-label">Type</label>
                        <select id="osctype" class="form-select">
                            <option value="sine" selected>Sine</option>
                            <option value="square">Square</option>
                            <option value="triangle">Triangle</option>
                            <option value="sawtooth">Sawtooth</option>
                        </select>
                    </div>
                    <div class="col-lg-6">
                        <label for="tempo" class="form-label">Tempo</label>
                        <input id="tempo" type="number" class="form-control" min="60" max="120" value="100">
                    </div>
                    <div class="col-12 mt-3 text-center">
                        <button id="play-button" type="button" class="btn btn-lg btn-outline-primary">Play</button>
                        <button id="stop-button" type="button" class="btn btn-lg btn-outline-danger" disabled>Stop</button>
                    </div>
                </div>
            </form>
        </div>

        <!-- Script -->
        <script src="index.js"></script>
    </body>
</html>