diff --git a/assets/svg/volume-down.svg b/assets/svg/volume-down.svg new file mode 100644 index 0000000..1d0487f --- /dev/null +++ b/assets/svg/volume-down.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/svg/volume-up.svg b/assets/svg/volume-up.svg new file mode 100644 index 0000000..6d056a9 --- /dev/null +++ b/assets/svg/volume-up.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/css/style.css b/css/style.css index 74805ea..ecab80d 100644 --- a/css/style.css +++ b/css/style.css @@ -50,17 +50,17 @@ body { height: 10px; background-color: white; position: relative; - margin-bottom: 25px; cursor: pointer; + margin-bottom: 25px; } .progress { width: 0; height: 100%; - background-color: rgba(255, 0, 0, 0.713); + background-color: #FF665E; } -.audio-time { +.audio-duration { width: 100%; position: absolute; top: 20px; @@ -72,6 +72,7 @@ body { display: flex; align-items: center; gap: 10px; + margin-bottom: 15px; } .play-list { @@ -106,9 +107,10 @@ body { .player-icon, .slider-icon, -.change-quote { +.change-quote, +.volume-icon { width: 32px; - height: 32px; + aspect-ratio: 1; background-size: 32px 32px; background-position: center center; background-repeat: no-repeat; @@ -136,7 +138,6 @@ body { .play { width: 54px; - height: 54px; background-size: 70px; background-image: url("../assets/svg/play.svg"); } @@ -147,18 +148,78 @@ body { .play-prev { width: 44px; - height: 44px; background-size: 44px 44px; background-image: url("../assets/svg/play-prev.svg"); } .play-next { width: 44px; - height: 44px; background-size: 44px 44px; background-image: url("../assets/svg/play-next.svg"); } +.volume-container { + width: 100%; + display: flex; + justify-content: center; + column-gap: 10px; + align-items: center; +} + +.volume-icon { + cursor: unset; + opacity: 1; +} + +.volume-down { + background-image: url("../assets/svg/volume-down.svg"); + transform: translateX(20%); +} + +.volume-up { + background-image: url("../assets/svg/volume-up.svg"); +} + +.volume-slider { + width: 55%; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: none; +} + +.volume-slider::-webkit-slider-runnable-track { + height: 5px; + border-radius: 10px; + background-color: #fff; +} + +.volume-slider::-webkit-slider-thumb { + margin-top: -8px; + width: 20px; + aspect-ratio: 1; + background: #FF665E; + border-radius: 10px; + cursor: pointer; + -webkit-appearance: none; +} + +.volume-slider::-moz-range-track { + height: 5px; + border-radius: 10px; + background-color: #fff; +} + +.volume-container::-moz-range-thumb { + margin-top: -8px; + width: 20px; + aspect-ratio: 1; + background: #FF665E; + border-radius: 10px; + cursor: pointer; + -moz-appearance: none; +} + .weather { display: flex; flex-direction: column; diff --git a/index.html b/index.html index 7dba696..0c4b0be 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@
-
+
@@ -26,7 +26,11 @@
-
+
+ + + +
diff --git a/js/audio.js b/js/audio.js index 89962e9..2b57c34 100644 --- a/js/audio.js +++ b/js/audio.js @@ -38,6 +38,7 @@ function updateAudioList() { export function playAudio() { if (isPlay) { + progressBar.style.transition = "none"; playAudioButton.classList.remove("pause"); audio.pause(); isPlay = false; @@ -81,23 +82,29 @@ const progressBar = document.querySelector(".progress"); const currentTimeSpan = document.querySelector(".audio-current"); const endTimeSpan = document.querySelector(".audio-end"); -export function updateAudioTime() { - const currentTime = new Date(audio.currentTime * 1000); - const duration = new Date(audio.duration * 1000) +function getTimeCode(sec) { + const time = new Date(sec * 1000); + return `${time.getMinutes().toString().padStart(2, "0")}:${time.getSeconds().toString().padStart(2, "0")}`; +} - if (currentTime >= duration) { - playNext(); - } +export function updateAudioTime() { + const currentTime = getTimeCode(audio.currentTime); + const duration = playList[playNum].duration; - currentTimeSpan.textContent = `${currentTime.getMinutes().toString().padStart(2, "0")}:${currentTime.getSeconds().toString().padStart(2, "0")}`; - endTimeSpan.textContent = `${duration.getMinutes().toString().padStart(2, "0")}:${duration.getSeconds().toString().padStart(2, "0")}` + currentTimeSpan.textContent = currentTime; + endTimeSpan.textContent = duration; updateProgressBar(); + + if (audio.ended) { + playNext() + } + setTimeout(updateAudioTime, 500); } function updateProgressBar() { - progressBar.style.transition = "2s ease-out width"; + progressBar.style.transition = "0.25s"; progressBar.style.width = audio.currentTime / audio.duration * 100 + "%"; } // при клике на прогресбар можно перематывать аудиотрек @@ -107,4 +114,14 @@ timeline.addEventListener("click", (event) => { audio.currentTime = timeToSeek; progressBar.style.transition = "none"; progressBar.style.width = audio.currentTime / audio.duration * 100 + "%"; -}) \ No newline at end of file +}) + +const volumeSlider = document.querySelector(".volume-slider"); + +function updateVolume() { + audio.volume = volumeSlider.value / 100; +} + +updateVolume(); + +volumeSlider.addEventListener("input", updateVolume); \ No newline at end of file diff --git a/js/playList.js b/js/playList.js index 0ceb139..922e462 100644 --- a/js/playList.js +++ b/js/playList.js @@ -2,21 +2,21 @@ const playList = [ { title: 'Aqua Caelestis', src: './assets/sounds/Aqua Caelestis.mp3', - duration: '00:58' + duration: '00:39' }, { title: 'River Flows In You', src: './assets/sounds/River Flows In You.mp3', - duration: '03:50' + duration: '01:37' }, { title: 'Summer Wind', src: './assets/sounds/Summer Wind.mp3', - duration: '05:05' + duration: '01:37' }, { title: 'Ennio Morricone', src: './assets/sounds/Ennio Morricone.mp3', - duration: '05:03' + duration: '01:37' } ]