48 lines
1.2 KiB
JavaScript
48 lines
1.2 KiB
JavaScript
const audio = document.getElementById('audio');
|
|
const playPauseBtn = document.getElementById('play-pause');
|
|
const progress = document.getElementById('progress');
|
|
const time = document.getElementById('time');
|
|
const vinyl = document.querySelector('.vinyl');
|
|
|
|
let isPlaying = false;
|
|
|
|
// Play / Pause button
|
|
playPauseBtn.addEventListener('click', () => {
|
|
if (isPlaying) {
|
|
audio.pause();
|
|
vinyl.style.animationPlayState = 'paused';
|
|
playPauseBtn.textContent = '▶️';
|
|
} else {
|
|
audio.play();
|
|
vinyl.style.animationPlayState = 'running';
|
|
playPauseBtn.textContent = '⏸️';
|
|
}
|
|
isPlaying = !isPlaying;
|
|
});
|
|
|
|
// Update progress and time
|
|
audio.addEventListener('timeupdate', () => {
|
|
progress.value = audio.currentTime;
|
|
updateTimeDisplay();
|
|
});
|
|
|
|
// Set duration when audio loads
|
|
audio.addEventListener('loadedmetadata', () => {
|
|
progress.max = audio.duration;
|
|
updateTimeDisplay();
|
|
});
|
|
|
|
// Seek audio
|
|
progress.addEventListener('input', () => {
|
|
audio.currentTime = progress.value;
|
|
});
|
|
|
|
function updateTimeDisplay() {
|
|
const format = (s) => {
|
|
const m = Math.floor(s / 60);
|
|
const ss = Math.floor(s % 60);
|
|
return `${m}:${ss < 10 ? '0' + ss : ss}`;
|
|
};
|
|
time.textContent = `${format(audio.currentTime)} / ${format(audio.duration)}`;
|
|
}
|