first commit with existing project files

1-HTMLMediaElement/app.js

@@ -0,0 +1,88 @@
+const audio = document.getElementById('audioPlayer');
+
+const playBtn = document.getElementById('playBtn');
+const pauseBtn = document.getElementById('pauseBtn');
+const resetBtn = document.getElementById('resetBtn');
+
+const currentTimeSpan = document.getElementById('currentTime');
+const totalTimeSpan = document.getElementById('totalTime');
+
+const fileInput = document.getElementById('fileInput');
+const loadFileBtn = document.getElementById('loadFileBtn');
+
+const volume = document.getElementById('volume-slider');
+
+const mediaInfo = document.querySelector('.media-info');
+
+let timer = null;
+
+let fileName;
+let audioSrc;
+
+/* Functions */
+
+function toReadableTime(seconds) {
+    return new Date(seconds * 1000).toISOString().substring(14, 19);
+}
+
+function updateTime() {
+    currentTimeSpan.textContent = toReadableTime(audio.currentTime);
+}
+
+fileInput.addEventListener('change', (event) => {
+    const file = event.target.files[0];
+    if (file) {
+        audioSrc = URL.createObjectURL(file);
+        fileName = file.name.split('.mp3')[0];
+    }
+});
+
+/* Events */
+
+loadFileBtn.addEventListener('click', () => {
+    audio.src = audioSrc;
+    audio.load();
+    mediaInfo.innerText = fileName;
+    updateTime();
+});
+
+audio.addEventListener('loadedmetadata', () => {
+    totalTimeSpan.textContent = toReadableTime(audio.duration);
+});
+
+playBtn.addEventListener('click', () => {
+    audio.play();
+    if (!timer) {
+        timer = setInterval(updateTime, 500);
+    }
+    document.title = `Playing ${fileName}`;
+});
+
+pauseBtn.addEventListener('click', () => {
+    audio.pause();
+});
+
+resetBtn.addEventListener('click', () => {
+    audio.pause();
+    audio.currentTime = 0;
+    updateTime();
+});
+
+audio.addEventListener('ended', () => {
+    clearInterval(timer);
+    timer = null;
+});
+
+audio.addEventListener('pause', () => {
+    clearInterval(timer);
+    timer = null;
+});
+
+volume.addEventListener("input", function (e) {
+    audio.volume = e.currentTarget.value / 100;
+});
+
+volume.addEventListener("dblclick", function (e) {
+    audio.volume = 0.5;
+    e.currentTarget.value = 50;
+});