<!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>