Skip to content

Commit

Permalink
add volume slider, fix some visual bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
Junk-debug committed Feb 3, 2024
1 parent 5484f2d commit f095b07
Show file tree
Hide file tree
Showing 6 changed files with 114 additions and 24 deletions.
3 changes: 3 additions & 0 deletions assets/svg/volume-down.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions assets/svg/volume-up.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
77 changes: 69 additions & 8 deletions css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -72,6 +72,7 @@ body {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}

.play-list {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -136,7 +138,6 @@ body {

.play {
width: 54px;
height: 54px;
background-size: 70px;
background-image: url("../assets/svg/play.svg");
}
Expand All @@ -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;
Expand Down
8 changes: 6 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<div class="player-controls">
<div class="timeline">
<div class="progress"></div>
<div class="audio-time">
<div class="audio-duration">
<span class="audio-current"></span>
<span class="audio-end"></span>
</div>
Expand All @@ -26,7 +26,11 @@
<button class="play player-icon"></button>
<button class="play-next player-icon"></button>
</div>
<div class="volume-container"></div>
<div class="volume-container">
<span class="volume-down volume-icon"></span>
<input class="volume-slider" type="range" min="0" max="100" value="15">
<button class="volume-up volume-icon"></button>
</div>
</div>
<ul class="play-list"></ul>
</div>
Expand Down
37 changes: 27 additions & 10 deletions js/audio.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ function updateAudioList() {

export function playAudio() {
if (isPlay) {
progressBar.style.transition = "none";
playAudioButton.classList.remove("pause");
audio.pause();
isPlay = false;
Expand Down Expand Up @@ -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 + "%";
}
// при клике на прогресбар можно перематывать аудиотрек
Expand All @@ -107,4 +114,14 @@ timeline.addEventListener("click", (event) => {
audio.currentTime = timeToSeek;
progressBar.style.transition = "none";
progressBar.style.width = audio.currentTime / audio.duration * 100 + "%";
})
})

const volumeSlider = document.querySelector(".volume-slider");

function updateVolume() {
audio.volume = volumeSlider.value / 100;
}

updateVolume();

volumeSlider.addEventListener("input", updateVolume);
8 changes: 4 additions & 4 deletions js/playList.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}
]

Expand Down

0 comments on commit f095b07

Please sign in to comment.