feed

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stem Player</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div id="player">
    <div id="song-title">Nome da Música</div>
    <div id="tracklist">
        <div class="track">
            <div class="track-name">Vocals</div>
            <audio id="vocals" class="stem-audio" src="vocals.mp3"></audio>
            <div class="controls">
                <button class="solo-button" onclick="soloTrack('vocals')">Solo</button>
                <button class="mute-button" onclick="muteTrack('vocals')">Mute</button>
            </div>
        </div>
        <div class="track">
            <div class="track-name">Drums</div>
            <audio id="drums" class="stem-audio" src="drums.mp3"></audio>
            <div class="controls">
                <button class="solo-button" onclick="soloTrack('drums')">Solo</button>
                <button class="mute-button" onclick="muteTrack('drums')">Mute</button>
            </div>
        </div>
        <div class="track">
            <div class="track-name">Bass</div>
            <audio id="bass" class="stem-audio" src="bass.mp3"></audio>
            <div class="controls">
                <button class="solo-button" onclick="soloTrack('bass')">Solo</button>
                <button class="mute-button" onclick="muteTrack('bass')">Mute</button>
            </div>
        </div>
        <div class="track">
            <div class="track-name">Guitar</div>
            <audio id="guitar" class="stem-audio" src="guitar.mp3"></audio>
            <div class="controls">
                <button class="solo-button" onclick="soloTrack('guitar')">Solo</button>
                <button class="mute-button" onclick="muteTrack('guitar')">Mute</button>
            </div>
        </div>
        <div class="track">
            <div class="track-name">Keys</div>
            <audio id="keys" class="stem-audio" src="keys.mp3"></audio>
            <div class="controls">
                <button class="solo-button" onclick="soloTrack('keys')">Solo</button>
                <button class="mute-button" onclick="muteTrack('keys')">Mute</button>
            </div>
        </div>
        <div class="track">
            <div class="track-name">Synth</div>
            <audio id="synth" class="stem-audio" src="synth.mp3"></audio>
            <div class="controls">
                <button class="solo-button" onclick="soloTrack('synth')">Solo</button>
                <button class="mute-button" onclick="muteTrack('synth')">Mute</button>
            </div>
        </div>
        <div class="track">
            <div class="track-name">Metronome</div>
            <audio id="metronome" class="stem-audio" src="metronome.mp3"></audio>
            <div class="controls">
                <button class="solo-button" onclick="soloTrack('metronome')">Solo</button>
                <button class="mute-button" onclick="muteTrack('metronome')">Mute</button>
            </div>
        </div>
    </div>
    <div id="controls">
        <button id="play-pause-button">Play</button>
        <button id="stop-button">Stop</button>
    </div>
    <div id="timeline-container">
        <input type="range" id="timeline" min="0" value="0">
    </div>
</div>

<script src="player.js"></script>

</body>
</html>