Hugging Face's logo

Spaces:
Doubleupai
/
Music-maker
Running

App Files Community
Doubleupai commited on
Commit
41c804f
•
1 Parent(s): 7f98a08

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +107 -19
index.html CHANGED
@@ -1,19 +1,107 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Online Music Maker</title>
7
+ <link rel="stylesheet" href="styles.css">
8
+ </head>
9
+ <body>
10
+ <div class="container">
11
+ <h1>Online Music Maker</h1>
12
+ <div class="instruments">
13
+ <div class="piano">
14
+ <h2>Piano</h2>
15
+ <div class="keys">
16
+ <div class="key" data-note="C4"></div>
17
+ <div class="key black" data-note="C#4"></div>
18
+ <div class="key" data-note="D4"></div>
19
+ <div class="key black" data-note="D#4"></div>
20
+ <div class="key" data-note="E4"></div>
21
+ <div class="key" data-note="F4"></div>
22
+ <div class="key black" data-note="F#4"></div>
23
+ <div class="key" data-note="G4"></div>
24
+ <div class="key black" data-note="G#4"></div>
25
+ <div class="key" data-note="A4"></div>
26
+ <div class="key black" data-note="A#4"></div>
27
+ <div class="key" data-note="B4"></div>
28
+ </div>
29
+ </div>
30
+ <div class="drums">
31
+ <h2>Drums</h2>
32
+ <button class="drum-button" data-sound="kick">Kick</button>
33
+ <button class="drum-button" data-sound="snare">Snare</button>
34
+ <button class="drum-button" data-sound="hihat">Hi-Hat</button>
35
+ </div>
36
+ <div class="pluck">
37
+ <h2>Pluck</h2>
38
+ <button class="pluck-button" data-sound="pluck1">Pluck 1</button>
39
+ <button class="pluck-button" data-sound="pluck2">Pluck 2</button>
40
+ <button class="pluck-button" data-sound="pluck3">Pluck 3</button>
41
+ </div>
42
+ <div class="voice">
43
+ <h2>Voice</h2>
44
+ <button class="voice-button" data-sound="voice1">Voice 1</button>
45
+ <button class="voice-button" data-sound="voice2">Voice 2</button>
46
+ <button class="voice-button" data-sound="voice3">Voice 3</button>
47
+ </div>
48
+ <div class="guitar">
49
+ <h2>Guitar</h2>
50
+ <button class="guitar-button" data-sound="guitar1">Guitar 1</button>
51
+ <button class="guitar-button" data-sound="guitar2">Guitar 2</button>
52
+ <button class="guitar-button" data-sound="guitar3">Guitar 3</button>
53
+ </div>
54
+ <div class="saxophone">
55
+ <h2>Saxophone</h2>
56
+ <button class="saxophone-button" data-sound="saxophone1">Saxophone 1</button>
57
+ <button class="saxophone-button" data-sound="saxophone2">Saxophone 2</button>
58
+ <button class="saxophone-button" data-sound="saxophone3">Saxophone 3</button>
59
+ </div>
60
+ <div class="8bit">
61
+ <h2>8-bit</h2>
62
+ <button class="8bit-button" data-sound="8bit1">8-bit 1</button>
63
+ <button class="8bit-button" data-sound="8bit2">8-bit 2</button>
64
+ <button class="8bit-button" data-sound="8bit3">8-bit 3</button>
65
+ </div>
66
+ <div class="16bit">
67
+ <h2>16-bit</h2>
68
+ <button class="16bit-button" data-sound="16bit1">16-bit 1</button>
69
+ <button class="16bit-button" data-sound="16bit2">16-bit 2</button>
70
+ <button class="16bit-button" data-sound="16bit3">16-bit 3</button>
71
+ </div>
72
+ </div>
73
+ <div class="genres">
74
+ <h2>Genres</h2>
75
+ <button class="genre-button" data-genre="moombahton">Moombahton</button>
76
+ <button class="genre-button" data-genre="moombahcore">Moombahcore</button>
77
+ <button class="genre-button" data-genre="dubstep">Dubstep</button>
78
+ <button class="genre-button" data-genre="pop">Pop</button>
79
+ <button class="genre-button" data-genre="hiphop">Hip Hop</button>
80
+ </div>
81
+ <div class="loops">
82
+ <h2>Loops</h2>
83
+ <button class="loop-button" data-loop="loop1">Loop 1</button>
84
+ <button class="loop-button" data-loop="loop2">Loop 2</button>
85
+ <button class="loop-button" data-loop="loop3">Loop 3</button>
86
+ </div>
87
+ <div class="fx">
88
+ <h2>FX</h2>
89
+ <button class="fx-button" data-fx="fx1">FX 1</button>
90
+ <button class="fx-button" data-fx="fx2">FX 2</button>
91
+ <button class="fx-button" data-fx="fx3">FX 3</button>
92
+ </div>
93
+ <div class="recorder">
94
+ <h2>Recorder</h2>
95
+ <button id="record-button">Record</button>
96
+ <button id="stop-button" disabled>Stop</button>
97
+ <button id="play-button" disabled>Play</button>
98
+ </div>
99
+ <div class="file-audio">
100
+ <h2>File Audio</h2>
101
+ <input type="file" id="audio-file" accept="audio/*">
102
+ <button id="play-file-button" disabled>Play File</button>
103
+ </div>
104
+ </div>
105
+ <script src="script.js"></script>
106
+ </body>
107
+ </html>