feat: add timeUpdate function for audio, change bg-gardient

MariyaShusharina · Sep 22, 2024 · 1825d2b · 1825d2b
1 parent d29ebfd
commit 1825d2b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -39,7 +39,7 @@ <h1>Audio Player</h1>
 				</div>
 
 				<div class="audio-div">
-					<audio src="./assets/songs/Unheilig_-_Schenk_mir_ein_Wunder.mp3"></audio>
+					<audio src="./assets/songs/Unheilig_-_Schenk_mir_ein_Wunder.mp3" ontimeupdate="timeUpdate()"></audio>
 				</div>
 
 				<div class="controls-div">

diff --git a/scripts.js b/scripts.js
@@ -173,6 +173,24 @@ function songTimeChange(value) {
 	currTimeDiv.textContent = songTime;
 }
 
+function timeUpdate() {
+
+	songTime = Math.round(audio.currentTime);
+
+	timeConverter();
+
+	currTimeDiv.textContent = songTime;
+}
+
+window.onload = function() {
+
+	songMaxTime = Math.round(audio.duration);
+
+	maxTimeConverter();
+
+	maxTimeDiv.textContent = songMaxTime;
+}
+
 
 /*
 

diff --git a/style.css b/style.css
@@ -82,7 +82,7 @@ a:hover { color: #DDDDDD; }
 	flex-direction: column;
 	gap: 0.3em;
 	padding: 1.7em;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
     border-radius: 1.5em;
 }