Hugging Face's logo

Spaces:
Doubleupai
/
Music-maker
Running

App Files Community
Music-maker
File size: 5,128 Bytes 
41c804f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Music Maker</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Online Music Maker</h1>
        <div class="instruments">
            <div class="piano">
                <h2>Piano</h2>
                <div class="keys">
                    <div class="key" data-note="C4"></div>
                    <div class="key black" data-note="C#4"></div>
                    <div class="key" data-note="D4"></div>
                    <div class="key black" data-note="D#4"></div>
                    <div class="key" data-note="E4"></div>
                    <div class="key" data-note="F4"></div>
                    <div class="key black" data-note="F#4"></div>
                    <div class="key" data-note="G4"></div>
                    <div class="key black" data-note="G#4"></div>
                    <div class="key" data-note="A4"></div>
                    <div class="key black" data-note="A#4"></div>
                    <div class="key" data-note="B4"></div>
                </div>
            </div>
            <div class="drums">
                <h2>Drums</h2>
                <button class="drum-button" data-sound="kick">Kick</button>
                <button class="drum-button" data-sound="snare">Snare</button>
                <button class="drum-button" data-sound="hihat">Hi-Hat</button>
            </div>
            <div class="pluck">
                <h2>Pluck</h2>
                <button class="pluck-button" data-sound="pluck1">Pluck 1</button>
                <button class="pluck-button" data-sound="pluck2">Pluck 2</button>
                <button class="pluck-button" data-sound="pluck3">Pluck 3</button>
            </div>
            <div class="voice">
                <h2>Voice</h2>
                <button class="voice-button" data-sound="voice1">Voice 1</button>
                <button class="voice-button" data-sound="voice2">Voice 2</button>
                <button class="voice-button" data-sound="voice3">Voice 3</button>
            </div>
            <div class="guitar">
                <h2>Guitar</h2>
                <button class="guitar-button" data-sound="guitar1">Guitar 1</button>
                <button class="guitar-button" data-sound="guitar2">Guitar 2</button>
                <button class="guitar-button" data-sound="guitar3">Guitar 3</button>
            </div>
            <div class="saxophone">
                <h2>Saxophone</h2>
                <button class="saxophone-button" data-sound="saxophone1">Saxophone 1</button>
                <button class="saxophone-button" data-sound="saxophone2">Saxophone 2</button>
                <button class="saxophone-button" data-sound="saxophone3">Saxophone 3</button>
            </div>
            <div class="8bit">
                <h2>8-bit</h2>
                <button class="8bit-button" data-sound="8bit1">8-bit 1</button>
                <button class="8bit-button" data-sound="8bit2">8-bit 2</button>
                <button class="8bit-button" data-sound="8bit3">8-bit 3</button>
            </div>
            <div class="16bit">
                <h2>16-bit</h2>
                <button class="16bit-button" data-sound="16bit1">16-bit 1</button>
                <button class="16bit-button" data-sound="16bit2">16-bit 2</button>
                <button class="16bit-button" data-sound="16bit3">16-bit 3</button>
            </div>
        </div>
        <div class="genres">
            <h2>Genres</h2>
            <button class="genre-button" data-genre="moombahton">Moombahton</button>
            <button class="genre-button" data-genre="moombahcore">Moombahcore</button>
            <button class="genre-button" data-genre="dubstep">Dubstep</button>
            <button class="genre-button" data-genre="pop">Pop</button>
            <button class="genre-button" data-genre="hiphop">Hip Hop</button>
        </div>
        <div class="loops">
            <h2>Loops</h2>
            <button class="loop-button" data-loop="loop1">Loop 1</button>
            <button class="loop-button" data-loop="loop2">Loop 2</button>
            <button class="loop-button" data-loop="loop3">Loop 3</button>
        </div>
        <div class="fx">
            <h2>FX</h2>
            <button class="fx-button" data-fx="fx1">FX 1</button>
            <button class="fx-button" data-fx="fx2">FX 2</button>
            <button class="fx-button" data-fx="fx3">FX 3</button>
        </div>
        <div class="recorder">
            <h2>Recorder</h2>
            <button id="record-button">Record</button>
            <button id="stop-button" disabled>Stop</button>
            <button id="play-button" disabled>Play</button>
        </div>
        <div class="file-audio">
            <h2>File Audio</h2>
            <input type="file" id="audio-file" accept="audio/*">
            <button id="play-file-button" disabled>Play File</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>