Stem Player
Nome da Música
Vocals
Drums
Bass
Guitar
Keys
Synth
Metronome
const playPauseButton = document.getElementById('play-pause-button'); const stopButton = document.getElementById('stop-button'); const audioElements = document.querySelectorAll('.stem-audio'); let isPlaying = false; playPauseButton.addEventListener('click', () => { if (!isPlaying) { playAll(); playPauseButton.textContent = 'Pause'; isPlaying = true; } else { pauseAll(); playPauseButton.textContent = 'Play'; isPlaying = false; } }); stopButton.addEventListener('click', () => { stopAll(); playPauseButton.textContent = 'Play'; isPlaying = false; }); function playAll() { audioElements.forEach(audio => audio.play()); } function pauseAll() { audioElements.forEach(audio => audio.pause()); } function stopAll() { audioElements.forEach(audio => { audio.pause(); audio.currentTime = 0; }); } function soloTrack(trackId) { audioElements.forEach(audio => { if (audio.id === trackId) { audio.muted = false; } else { audio.muted = true; } }); } function muteTrack(trackId) { const track = document.getElementById(trackId); track.muted = !track.muted; } body { font-family: Arial, sans-serif; background-color: #f5f5f5; margin: 0; padding: 0; } #player { max-width: 600px; margin: 50px auto; background-color: #ffffff; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 20px; } #song-title { font-size: 24px; font-weight: bold; text-align: center; margin-bottom: 20px; } #tracklist { display: flex; flex-direction: column; } .track { display: flex; align-items: center; margin-bottom: 10px; } .track-name { flex: 1; font-weight: bold; margin-right: 10px; } .stem-audio { flex: 2; width: 100%; } .controls { flex: 1; display: flex; justify-content: flex-end; align-items: center; } .controls button { margin-left: 10px; } #controls { text-align: center; margin-top: 20px; } button { background-color: #007bff; color: #ffffff; border: none; padding: 10px 20px; font-size: 16px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #0056b3; } #timeline-container { margin-top: 20px; text-align: center; } #timeline { width: 90%; }