Spaces:
Running
Running
| <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> |