index.html

<!DOCTYPE html>
<html lang="en">

<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">
    <link rel="stylesheet" href="./style.css">
    <title>Beat Maker</title>
</head>

<body>
    <div class="sequencer">
        <div class="kick-track">
            <div class="controls">
                <h1>Kick</h1>
                <button data-track="0" class="mute kick-volume">
                    <i class="fas fa-volume-mute"></i>
                </button>
                <select name="kick-select" id="kick-select">
                    <option value="./sounds/kick-classic.wav">Classic Kick</option>
                    <option value="./sounds/kick-808.wav">808 Kick</option>
                    <option value="./sounds/kick-heavy.wav">Kick Heavy</option>
                    <option value="./sounds/kick-softy.wav">Kick Softy</option>
                </select>
            </div>
            <div class="kick">
                <div class="pad kick-pad b0"></div>
                <div class="pad kick-pad b1"></div>
                <div class="pad kick-pad b2"></div>
                <div class="pad kick-pad b3"></div>
                <div class="pad kick-pad b4"></div>
                <div class="pad kick-pad b5"></div>
                <div class="pad kick-pad b6"></div>
                <div class="pad kick-pad b7"></div>
            </div>
        </div>
        <div class="snare-track">
            <div class="controls">
                <h1>Snare</h1>
                <button data-track="1" class="mute snare-volume">
                    <i class="fas fa-volume-mute"></i>
                </button>
                <select name="snare-select" id="snare-select">
                    <option value="./sounds/snare-acoustic01.wav">Classic Snare</option>
                    <option value="./sounds/snare-808.wav">808 Snare</option>
                    <option value="./sounds/snare-vinyl02.wav">Snare Vinyl</option>
                </select>
            </div>
            <div class="snare">
                <div class="pad snare-pad b0"></div>
                <div class="pad snare-pad b1"></div>
                <div class="pad snare-pad b2"></div>
                <div class="pad snare-pad b3"></div>
                <div class="pad snare-pad b4"></div>
                <div class="pad snare-pad b5"></div>
                <div class="pad snare-pad b6"></div>
                <div class="pad snare-pad b7"></div>
            </div>
        </div>
        <div class="hihat-track">
            <div class="controls">
                <h1>HiHat</h1>
                <button data-track="2" class="mute hihat-volume">
                    <i class="fas fa-volume-mute"></i>
                </button>
                <select name="hihat-select" id="hihat-select">
                    <option value="./sounds/hihat-acoustic01.wav">Hihat Acoustic</option>
                    <option value="./sounds/hihat-808.wav">808 Hihat</option>
                </select>
            </div>
            <div class="hihat">
                <div class="pad hihat-pad b0"></div>
                <div class="pad hihat-pad b1"></div>
                <div class="pad hihat-pad b2"></div>
                <div class="pad hihat-pad b3"></div>
                <div class="pad hihat-pad b4"></div>
                <div class="pad hihat-pad b5"></div>
                <div class="pad hihat-pad b6"></div>
                <div class="pad hihat-pad b7"></div>
            </div>
        </div>
        <button class="play">Play</button>
        <div class="tempo">
            <input type="range" class="tempo-slider" max="100" min="0" value="50">
            <p>Tempo: <span class="tempo-nr">50</span></p>
        </div>
    </div>
    <audio class="kick-sound" src="./sounds/kick-classic.wav"></audio>
    <audio class="snare-sound" src="./sounds/snare-acoustic01.wav"></audio>
    <audio class="hihat-sound" src="./sounds/hihat-acoustic01.wav"></audio>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"
        integrity="sha256-MAgcygDRahs+F/Nk5Vz387whB4kSK9NXlDN3w58LLq0=" crossorigin="anonymous"></script>
    <script src="./app.js"></script>
</body>

</html>