Merge pull request #57 from DiptanshuG/main

feat: Add a simple audio player using HTML and JavaScript
Chayandas07 · Oct 23, 2023 · a514f29 · a514f29
2 parents 247f7ae + 5c1ba84
commit a514f29
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 0 deletions.
diff --git a/AudioPlayer/audio-file.mp3 b/AudioPlayer/audio-file.mp3
diff --git a/AudioPlayer/audioPlayer.js b/AudioPlayer/audioPlayer.js
@@ -0,0 +1,35 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const audio = document.getElementById("audio");
+    const playPauseButton = document.getElementById("playPause");
+    const stopButton = document.getElementById("stop");
+    const volumeUpButton = document.getElementById("volumeUp");
+    const volumeDownButton = document.getElementById("volumeDown");
+
+    playPauseButton.addEventListener("click", function () {
+        if (audio.paused) {
+            audio.play();
+            playPauseButton.innerHTML = "Pause";
+        } else {
+            audio.pause();
+            playPauseButton.innerHTML = "Play";
+        }
+    });
+
+    stopButton.addEventListener("click", function () {
+        audio.pause();
+        audio.currentTime = 0;
+        playPauseButton.innerHTML = "Play";
+    });
+
+    volumeUpButton.addEventListener("click", function () {
+        if (audio.volume < 1.0) {
+            audio.volume += 0.1;
+        }
+    });
+
+    volumeDownButton.addEventListener("click", function () {
+        if (audio.volume > 0.0) {
+            audio.volume -= 0.1;
+        }
+    });
+});
diff --git a/AudioPlayer/index.html b/AudioPlayer/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Simple Audio Player</title>
+</head>
+
+<body>
+    <h1>Simple Audio Player</h1>
+    <audio id="audio" controls>
+        <source src="audio-file.mp3" type="audio/mpeg">
+        Your browser does not support the audio element.
+    </audio>
+    <button id="playPause">Play/Pause</button>
+    <button id="stop">Stop</button>
+    <button id="volumeUp">Volume Up</button>
+    <button id="volumeDown">Volume Down</button>
+
+    <script src="audioPlayer.js"></script>
+</body>
+
+</html>