Добавил ползунок громкости в плеер

README.md

@@ -1,18 +1,3 @@
 # music-storage
 
 Мини сервис для хранения/загрузки/воспроизведении песен
-
-Пример сервиса: https://music.nervy.pro
-
-
-## environment
-
-- переименовать `music_storage/.env.example` -> `music_storage/.env`
-- заполнить `.env`
-
-## Запуск
-
-```bash
-cd music_storage
-uv run python manage.py runserver
-```

music_storage/static/js/player.js

@@ -8,6 +8,9 @@ document.addEventListener('DOMContentLoaded', function () {
     const playPauseBtn = document.getElementById('playPauseBtn');
     const nextBtn = document.getElementById('nextBtn');
     const prevBtn = document.getElementById('prevBtn');
+    const volumeControl = document.getElementById('volumeControl');
+    const savedVolume = localStorage.getItem('audioPlayerVolume');
+
 
     const progressBar = document.getElementById('audioProgress');
     const currentTimeElem = document.getElementById('currentTime');
@@ -34,6 +37,17 @@ document.addEventListener('DOMContentLoaded', function () {
         if (currentTimeElem) currentTimeElem.textContent = formatTime(current || 0);
         if (durationElem) durationElem.textContent = formatTime(duration || 0);
     }
+    // Восстановление сохраненного уровня громкости
+    if (savedVolume !== null) {
+        audioPlayer.volume = parseFloat(savedVolume);
+    }
+
+    // Управление громкостью
+    if (volumeControl) {
+        volumeControl.addEventListener('input', () => {
+            audioPlayer.volume = volumeControl.value;
+        });
+    }
 
     // Обновление прогресса при воспроизведении
     audioPlayer.addEventListener('timeupdate', () => {

music_storage/templates/components/player.html

@@ -15,6 +15,16 @@
             <button class="control-btn" id="prevBtn"><i class="fas fa-backward"></i></button>
             <button class="control-btn" id="playPauseBtn"><i class="fas fa-play"></i></button>
             <button class="control-btn" id="nextBtn"><i class="fas fa-forward"></i></button>
+
+            <input
+                type="range"
+                id="volumeControl"
+                min="0"
+                max="1"
+                step="0.01"
+                value="1"
+                title="Громкость"
+            >
         </div>
     </div>
     <audio id="audioPlayer" class="audio-player" preload="metadata">