random-music-js/index.html at master · innermost47/random-music-js · 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
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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Random Music JS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta
      name="description"
      content='Experience the future of music with our cutting-edge, JavaScript-powered random music generator. Discover the endless possibilities of unique, randomly generated melodies and rhythms with our two options of music: "eight bits" for an upbeat and energetic sound, and "sine" for a softer and more ambient sound. Utilizing the Web Audio API, our app offers an immersive and unparalleled musical experience. Try it out now and let the beats transport you.'
    />
    <meta property="og:title" content="Random Music JS" />
    <meta property="og:type" content="website" />
    <meta
      property="og:image"
      content="https://random-music-js.inner-most.fr/logo.svg"
    />
    <meta
      property="og:description"
      content='Experience the future of music with our cutting-edge, JavaScript-powered random music generator. Discover the endless possibilities of unique, randomly generated melodies and rhythms with our two options of music: "eight bits" for an upbeat and energetic sound, and "sine" for a softer and more ambient sound. Utilizing the Web Audio API, our app offers an immersive and unparalleled musical experience. Try it out now and let the beats transport you.'
    />

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css"
    />

    <link rel="stylesheet" href="style.css" />
    <link rel="shortcut icon" href="logo.svg" type="image/x-icon" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Rowdies&family=Inter:wght@300;400;600;700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <canvas id="canva"></canvas>

    <div class="canvas-overlay"></div>

    <div class="content-wrapper">
      <main class="container-fluid h-100">
        <div class="row h-100 align-items-center justify-content-center">
          <div class="col-12 col-lg-12 col-xl-12 p-4">
            <div class="text-center mb-4">
              <h1 class="display-4 fw-bold text-white mb-3 title-glow">
                <i class="bi bi-music-note-beamed me-2"></i>
                Random Music JS
              </h1>
              <p class="lead text-white">Generative psychedelic soundscapes</p>
            </div>

            <div class="player-card">
              <div class="card-body p-4">
                <div class="info-display mb-4">
                  <div class="row g-2 text-center mb-2">
                    <div class="col-6 col-md-6">
                      <div class="info-box">
                        <small class="text-light d-block">Step</small>
                        <span id="currentStep" class="fw-bold">--</span>
                      </div>
                    </div>
                    <div class="col-6 col-md-6">
                      <div class="info-box">
                        <small class="text-light d-block">Measure</small>
                        <span id="currentMeasure" class="fw-bold">--</span>
                      </div>
                    </div>
                  </div>
                  <div class="row g-2 text-center">
                    <div class="col-6 col-md-6">
                      <div class="info-box">
                        <small class="text-light d-block">Scale</small>
                        <span id="currentScale" class="fw-bold">--</span>
                      </div>
                    </div>
                    <div class="col-6 col-md-6">
                      <div class="info-box">
                        <small class="text-light d-block">Duration</small>
                        <span id="currentSongDuration" class="fw-bold">--</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="mb-4">
                  <label
                    for="songChoice"
                    class="form-label text-white fw-semibold"
                  >
                    <i class="bi bi-soundwave me-2"></i>Sound Style
                  </label>
                  <select class="form-select form-select-lg" id="songChoice">
                    <option value="0">Eight Bits - Energetic & Upbeat</option>
                    <option value="1">Sine - Soft & Ambient</option>
                  </select>
                </div>

                <div class="d-flex gap-3 justify-content-center">
                  <button id="play" class="btn btn-play btn-lg px-5">
                    <i class="bi bi-play-fill me-2"></i>
                    <span class="play-text">Play</span>
                    <span class="pause-text d-none">Pause</span>
                  </button>
                  <button id="stop" class="btn btn-stop btn-lg px-4">
                    <i class="bi bi-stop-fill"></i>
                  </button>
                </div>

                <div class="text-center mt-3">
                  <small id="currentSong" class="text-light"
                    >Press Play to start</small
                  >
                </div>
                <a
                  href="https://github.com/innermost47/random-music-js"
                  target="_blank"
                  class="btn btn-github-small"
                  title="View on GitHub"
                >
                  <i class="bi bi-github"></i>
                </a>
                <button id="help" class="btn btn-help-small" title="Help">
                  <i class="bi bi-question-circle"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </main>

      <footer class="legals">
        <a
          href="https://legals.anthony-charretier.fr"
          target="_blank"
          class="text-decoration-none"
        >
          <i class="bi bi-shield-check me-1"></i>Legal Information
        </a>
      </footer>
    </div>

    <div class="modal fade" id="welcome-modal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
          <div class="modal-header border-0">
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body text-center p-5">
            <div class="mb-4">
              <img
                src="logo.svg"
                alt="logo"
                class="img-fluid"
                style="max-width: 250px"
              />
            </div>
            <h2 class="mb-4 fw-bold">Welcome to Random Music Generator!</h2>
            <p class="lead mb-4">
              Experience unique and innovative generative music! Our
              application, built entirely with pure JavaScript and utilizing the
              Web Audio API, offers you two distinct music options:
            </p>
            <div class="row g-3 mb-4">
              <div class="col-md-6">
                <div class="p-3 rounded">
                  <h5 class="fw-bold mb-2">
                    <i class="bi bi-lightning-charge text-warning"></i> Eight
                    Bits
                  </h5>
                  <p class="small mb-0">Upbeat and energetic sound</p>
                </div>
              </div>
              <div class="col-md-6">
                <div class="p-3 rounded">
                  <h5 class="fw-bold mb-2">
                    <i class="bi bi-water text-info"></i> Sine
                  </h5>
                  <p class="small mb-0">Soft and ambient sound</p>
                </div>
              </div>
            </div>
            <p class="mb-4">
              The music is generated randomly in real-time, creating unique
              melodies and rhythms every time you hit play. Let the beats
              transport you!
            </p>
            <button
              class="btn btn-outline-primary btn-lg px-5 mt-4"
              data-bs-dismiss="modal"
            >
              <i class="bi bi-play-circle me-2"></i>Start Exploring
            </button>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js" type="module"></script>
  </body>
</html>