vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

slider

Browse source
This commit is contained in:
Eduard Prigoana 2025-10-23 00:45:14 +03:00
parent 8f2fefbb84
commit 0f4e37ff4f
1 changed files with 83 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
js/app.js
View file

@ -1038,6 +1038,7 @@ document.addEventListener('DOMContentLoaded', async () => {
let isSeeking = false; let isSeeking = false;
let wasPlaying = false; let wasPlaying = false;
let isAdjustingVolume = false;
const seek = (bar, fill, event, setter) => { const seek = (bar, fill, event, setter) => {
const rect = bar.getBoundingClientRect(); const rect = bar.getBoundingClientRect();
@ -1045,10 +1046,37 @@ document.addEventListener('DOMContentLoaded', async () => {
setter(position); setter(position);
}; };
progressBar.addEventListener('mousedown', () => { progressBar.addEventListener('mousedown', (e) => {
isSeeking = true; isSeeking = true;
wasPlaying = !audioPlayer.paused; wasPlaying = !audioPlayer.paused;
if (wasPlaying) audioPlayer.pause(); if (wasPlaying) audioPlayer.pause();
seek(progressBar, progressFill, e, position => {
if (!isNaN(audioPlayer.duration)) {
audioPlayer.currentTime = position * audioPlayer.duration;
progressFill.style.width = `${position * 100}%`;
}
});
});
document.addEventListener('mousemove', (e) => {
if (isSeeking) {
seek(progressBar, progressFill, e, position => {
if (!isNaN(audioPlayer.duration)) {
audioPlayer.currentTime = position * audioPlayer.duration;
progressFill.style.width = `${position * 100}%`;
}
});
}
if (isAdjustingVolume) {
seek(volumeBar, volumeFill, e, position => {
audioPlayer.volume = position;
volumeFill.style.width = `${position * 100}%`;
volumeBar.style.setProperty('--volume-level', `${position * 100}%`);
localStorage.setItem('volume', position);
});
}
}); });
document.addEventListener('mouseup', (e) => { document.addEventListener('mouseup', (e) => {
@ -1062,6 +1090,10 @@ document.addEventListener('DOMContentLoaded', async () => {
}); });
isSeeking = false; isSeeking = false;
} }
if (isAdjustingVolume) {
isAdjustingVolume = false;
}
}); });
progressBar.addEventListener('click', e => { progressBar.addEventListener('click', e => {
@ -1075,12 +1107,28 @@ document.addEventListener('DOMContentLoaded', async () => {
} }
}); });
volumeBar.addEventListener('click', e => { volumeBar.addEventListener('mousedown', (e) => {
isAdjustingVolume = true;
seek(volumeBar, volumeFill, e, position => { seek(volumeBar, volumeFill, e, position => {
audioPlayer.volume = position; audioPlayer.volume = position;
volumeFill.style.width = `${position * 100}%`;
volumeBar.style.setProperty('--volume-level', `${position * 100}%`);
localStorage.setItem('volume', position);
}); });
}); });
volumeBar.addEventListener('click', e => {
if (!isAdjustingVolume) {
seek(volumeBar, volumeFill, e, position => {
audioPlayer.volume = position;
volumeFill.style.width = `${position * 100}%`;
volumeBar.style.setProperty('--volume-level', `${position * 100}%`);
localStorage.setItem('volume', position);
});
}
});
const updateVolumeUI = () => { const updateVolumeUI = () => {
const { volume, muted } = audioPlayer; const { volume, muted } = audioPlayer;
volumeBtn.innerHTML = (muted || volume === 0) ? SVG_MUTE : SVG_VOLUME; volumeBtn.innerHTML = (muted || volume === 0) ? SVG_MUTE : SVG_VOLUME;