add mute button, improve playlist logic

Junk-debug · Feb 5, 2024 · 6491668 · 6491668
1 parent f095b07
commit 6491668
Show file tree

Hide file tree

Showing 8 changed files with 198 additions and 59 deletions.
diff --git a/assets/svg/volume-mute.svg b/assets/svg/volume-mute.svg
diff --git a/css/style.css b/css/style.css
@@ -3,6 +3,10 @@
   src: url("../assets/fonts/Arial-MT.woff"); /* Путь к файлу со шрифтом */
  }
 
+:root {
+  --accent-color: #FF665E;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
@@ -34,6 +38,9 @@ body {
 
 .player {
   z-index: 2;
+  background-color: rgba(36, 36, 36, 0.5);
+  padding: 20px;
+  border-radius: 5px;
 }
 
 .player-controls {
@@ -57,7 +64,7 @@ body {
 .progress {
   width: 0;
   height: 100%;
-  background-color: #FF665E;
+  background-color: var(--accent-color);
 }
 
 .audio-duration {
@@ -84,31 +91,24 @@ body {
   padding: 5px;
   padding-left: 20px;
   list-style: none;
-  opacity: .8;
-  cursor: pointer;
   transition: .3s;
+  display: flex;
+  align-items: center;
 }
 
-.play-item:hover {
-  opacity: 1;
-}
-
-.play-item::before {
-  content: "\2713";  
-  position: absolute;
-  left: 0;
-  top: 2px;
-  font-weight: 900;
+.item-active {
+  color: var(--accent-color);
 }
 
-.item-active::before {
-  color: #C5B358;
+.item-active button {
+  background-color: var(--accent-color);
 }
 
 .player-icon,
 .slider-icon,
 .change-quote,
-.volume-icon {
+.volume-icon,
+.li-button {
   width: 32px;
   aspect-ratio: 1;
   background-size: 32px 32px;
@@ -124,26 +124,50 @@ body {
 
 .player-icon:hover,
 .slider-icon:hover,
-.change-quote:hover {
+.change-quote:hover,
+.volume-icon:hover,
+.li-button:hover {
   opacity: 1;
 }
 
 .player-icon:active,
 .slider-icon:active,
-.change-quote:active {
+.change-quote:active,
+.volume-icon:active,
+.li-button:active {
   border: 0;
   outline: 0;  
   transform: scale(1.1);
 }
 
+.li-button {
+  height: 35px;
+  width: 35px;
+  margin-right: 5px;
+}
+
+.li-play {
+  background-color: white;
+  mask-size: 50px;
+  mask-position: center center;
+  mask-repeat: no-repeat;
+  mask-image:  url("../assets/svg/play.svg");
+  -webkit-mask-image: url("../assets/svg/play.svg");
+}
+
 .play {
   width: 54px;
-  background-size: 70px;
-  background-image: url("../assets/svg/play.svg");
+  mask-position: center center;
+  mask-repeat: no-repeat;
+  background-color: white;
+  mask-size: 70px;
+  mask-image:  url("../assets/svg/play.svg");
+  -webkit-mask-image: url("../assets/svg/play.svg");
 }
 
 .pause {
-  background-image: url("../assets/svg/pause.svg");
+  mask-image: url("../assets/svg/pause.svg");
+  -webkit-mask-image: url("../assets/svg/pause.svg");
 }
 
 .play-prev {
@@ -166,20 +190,14 @@ body {
   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-mute {
+  background-image: url("../assets/svg/volume-mute.svg");
+}
+
 .volume-slider {
   width: 55%;
   -webkit-appearance: none;
@@ -198,7 +216,7 @@ body {
   margin-top: -8px;
   width: 20px;
   aspect-ratio: 1;
-  background: #FF665E;
+  background: var(--accent-color);
   border-radius: 10px;
   cursor: pointer;
   -webkit-appearance: none;
@@ -214,7 +232,7 @@ body {
   margin-top: -8px;
   width: 20px;
   aspect-ratio: 1;
-  background: #FF665E;
+  background: var(--accent-color);
   border-radius: 10px;
   cursor: pointer;
   -moz-appearance: none;

diff --git a/index.html b/index.html
@@ -27,9 +27,8 @@
           <button class="play-next player-icon"></button>
         </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>
+          <input class="volume-slider" type="range" min="0" max="100" value="15">
         </div>
       </div>
       <ul class="play-list"></ul>

diff --git a/js/audio.js b/js/audio.js
@@ -16,24 +16,35 @@ export function createAudioList() {
         const li = document.createElement('li');
         li.textContent = playList[i].title;
         li.className = "play-item";
-        li.value = i;
+        const button = document.createElement('button');
+        button.value = i;
+        button.className = "li-button li-play";
+        li.prepend(button);
         audioList.append(li);
-        li.addEventListener("click", () => {
-            isPlay = false;
-            playNum = li.value;
-            resetAudio()
-            playAudio();
-        });
+        button.addEventListener("click", function() {
+            if (playNum == button.value) {
+                playAudio();
+            } else {
+                isPlay = false;
+                playNum = button.value
+                resetAudio();
+                playAudio()
+            }
+        })
     }
 }
 
 function updateAudioList() {
-    const list = document.querySelectorAll(".play-item")
-    const li = list[playNum];
+    const list = document.querySelectorAll(".play-item");
     for (const li of list) {
+        li.querySelector("button").classList.remove("pause");
         li.classList.remove("item-active");
     }
-    li.classList.add("item-active");
+    const button = list[playNum].querySelector("button");
+    list[playNum].classList.add("item-active");
+    if (isPlay) {
+        button.classList.add("pause");
+    }
 }
 
 export function playAudio() {
@@ -76,6 +87,9 @@ function resetAudio() {
     audio.src = playList[playNum].src;
 }
 
+
+
+
 const timeline = document.querySelector(".timeline");
 const progressBar = document.querySelector(".progress");
 
@@ -116,12 +130,53 @@ timeline.addEventListener("click", (event) => {
     progressBar.style.width = audio.currentTime / audio.duration * 100 + "%";
 })
 
+
+
+
 const volumeSlider = document.querySelector(".volume-slider");
+const volumeButton = document.querySelector(".volume-icon");
 
-function updateVolume() {
+function muteAudio() {
+    if (audio.muted) {
+        audio.muted = false;
+    } else {
+        audio.muted = true;
+    }
+    volumeButton.classList.toggle("volume-mute");
+}
+
+export function updateVolume() {
     audio.volume = volumeSlider.value / 100;
 }
 
-updateVolume();
+function volumeUp() {
+    audio.volume += (1 / 100);
+    volumeSlider.value++;
+}
+
+function volumeDown() {
+    audio.volume -= (1 / 100);
+    volumeSlider.value--;
+}
 
-volumeSlider.addEventListener("input", updateVolume);
+volumeSlider.addEventListener("input", updateVolume);
+volumeButton.addEventListener("click", muteAudio);
+
+
+
+// key events
+document.addEventListener("keydown", (event) => {
+    if (event.code == "KeyM") {
+        muteAudio();
+    } else if (event.code == "KeyK") {
+        playAudio();
+    } else if (event.code == "KeyN" && event.shiftKey) {
+        playNext();
+    } else if (event.code == "KeyP" && event.shiftKey) {
+        playPrev();
+    } else if (event.code == "ArrowUp") {
+        volumeUp();
+    } else if (event.code == "ArrowDown") {
+        volumeDown();
+    }
+})
diff --git a/js/index.js b/js/index.js
@@ -3,7 +3,7 @@ import { inputCity, getWeather } from './weather.js';
 import { prevSlideButton, nextSlideButton, setRandomNum, slideNext, slidePrev, setBg } from './slider.js';
 import { setLocalStorage, getLocalStorage } from './localStorage.js';
 import { setQuote, changeQuoteButton } from './quotes.js';
-import { playAudio, playAudioButton, createAudioList, playNext, playPrev, prevAudioButton, nextAudioButton, updateAudioTime } from './audio.js';
+import { playAudio, playAudioButton, createAudioList, playNext, playPrev, prevAudioButton, nextAudioButton, updateAudioTime, updateVolume } from './audio.js';
 
 // первый вызов цикличного счетчика времени
 showTime();
@@ -36,4 +36,5 @@ playAudioButton.addEventListener("click", playAudio)
 nextAudioButton.addEventListener("click", playNext);
 prevAudioButton.addEventListener("click", playPrev);
 
-updateAudioTime();
+updateAudioTime();
+updateVolume();
diff --git a/js/playList.js b/js/playList.js
@@ -11,7 +11,7 @@ const playList = [
     {
         title: 'Summer Wind',
         src: './assets/sounds/Summer Wind.mp3',
-        duration: '01:37'
+        duration: '01:50'
     },
     {
         title: 'Ennio Morricone',

diff --git a/js/quotes.js b/js/quotes.js
@@ -1,17 +1,14 @@
 import { getRandomNum } from "./slider.js";
+import quotes from './quotes.json' assert { type: "json" };
 
 const quoteDiv = document.querySelector(".quote");
 const authorDiv = document.querySelector(".author");
 
 export const changeQuoteButton = document.querySelector(".change-quote");
 
-export async function setQuote() {
-    const url = 'https://type.fit/api/quotes';
-    const res = await fetch(url);
-    const data = await res.json();
+export function setQuote() {
+    const random = getRandomNum(0, quotes.length - 1);
 
-    const random = getRandomNum(0, data.length - 1);
-
-    quoteDiv.textContent = data[random].text;
-    authorDiv.textContent = data[random].author;
+    quoteDiv.textContent = quotes[random].text;
+    authorDiv.textContent = quotes[random].author;
 }