HLD: Music Streaming

pillars-of-creation-ind · Jul 8, 2024 · 99e8db1 · 99e8db1
1 parent f95ac71
commit 99e8db1
Show file tree

Hide file tree

Showing 4 changed files with 225 additions and 0 deletions.
diff --git a/HLD/MusicStreaming/example1/index.html b/HLD/MusicStreaming/example1/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Music Player</title>
+  <style>
+    /* Basic styling for the music player */
+    #music-player {
+      max-width: 300px;
+      margin: 0 auto;
+      text-align: center;
+    }
+    #controls {
+      display: flex;
+      justify-content: space-between;
+      margin: 10px 0;
+    }
+    #controls button {
+      padding: 10px;
+    }
+    #volume-control {
+      margin-top: 10px;
+    }
+  </style>
+</head>
+<body>
+  <div id="music-player">
+    <h1>Music Player</h1>
+    <audio id="audio-player" src="song1.mp3"></audio>
+    <div id="controls">
+      <button id="play-button">Play</button>
+      <button id="pause-button">Pause</button>
+      <button id="stop-button">Stop</button>
+      <button id="prev-button">Previous</button>
+      <button id="next-button">Next</button>
+    </div>
+    <div id="volume-control">
+      <label for="volume-slider">Volume</label>
+      <input type="range" id="volume-slider" min="0" max="1" step="0.1" value="1">
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/HLD/MusicStreaming/example1/script.js b/HLD/MusicStreaming/example1/script.js
@@ -0,0 +1,56 @@
+const audioPlayer = document.getElementById('audio-player');
+const playButton = document.getElementById('play-button');
+const pauseButton = document.getElementById('pause-button');
+const stopButton = document.getElementById('stop-button');
+const prevButton = document.getElementById('prev-button');
+const nextButton = document.getElementById('next-button');
+const volumeSlider = document.getElementById('volume-slider');
+
+const playlist = ['song1.mp3', 'song2.mp3', 'song3.mp3']; // Replace with your actual song URLs
+let currentSongIndex = 0;
+
+function loadSong(index) {
+  audioPlayer.src = playlist[index];
+  audioPlayer.load();
+}
+
+function playSong() {
+  audioPlayer.play();
+}
+
+function pauseSong() {
+  audioPlayer.pause();
+}
+
+function stopSong() {
+  audioPlayer.pause();
+  audioPlayer.currentTime = 0;
+}
+
+function prevSong() {
+  currentSongIndex = (currentSongIndex - 1 + playlist.length) % playlist.length;
+  loadSong(currentSongIndex);
+  playSong();
+}
+
+function nextSong() {
+  currentSongIndex = (currentSongIndex + 1) % playlist.length;
+  loadSong(currentSongIndex);
+  playSong();
+}
+
+function setVolume(volume) {
+  audioPlayer.volume = volume;
+}
+
+playButton.addEventListener('click', playSong);
+pauseButton.addEventListener('click', pauseSong);
+stopButton.addEventListener('click', stopSong);
+prevButton.addEventListener('click', prevSong);
+nextButton.addEventListener('click', nextSong);
+volumeSlider.addEventListener('input', (event) => {
+  setVolume(event.target.value);
+});
+
+// Load the first song on page load
+loadSong(currentSongIndex);
diff --git a/HLD/MusicStreaming/example2/index.html b/HLD/MusicStreaming/example2/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Music Player with Media Source API</title>
+  <style>
+    /* Basic styling for the music player */
+    #music-player {
+      max-width: 300px;
+      margin: 0 auto;
+      text-align: center;
+    }
+    #controls {
+      display: flex;
+      justify-content: space-between;
+      margin: 10px 0;
+    }
+    #controls button {
+      padding: 10px;
+    }
+    #volume-control {
+      margin-top: 10px;
+    }
+  </style>
+</head>
+<body>
+  <div id="music-player">
+    <h1>Music Player</h1>
+    <audio id="audio-player" controls></audio>
+    <div id="controls">
+      <button id="play-button">Play</button>
+      <button id="pause-button">Pause</button>
+      <button id="stop-button">Stop</button>
+      <button id="prev-button">Previous</button>
+      <button id="next-button">Next</button>
+    </div>
+    <div id="volume-control">
+      <label for="volume-slider">Volume</label>
+      <input type="range" id="volume-slider" min="0" max="1" step="0.1" value="1">
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/HLD/MusicStreaming/example2/script.js b/HLD/MusicStreaming/example2/script.js
@@ -0,0 +1,79 @@
+const audioPlayer = document.getElementById('audio-player');
+const playButton = document.getElementById('play-button');
+const pauseButton = document.getElementById('pause-button');
+const stopButton = document.getElementById('stop-button');
+const prevButton = document.getElementById('prev-button');
+const nextButton = document.getElementById('next-button');
+const volumeSlider = document.getElementById('volume-slider');
+
+const playlist = ['song1.mp3', 'song2.mp3', 'song3.mp3']; // Replace with your actual song URLs
+let currentSongIndex = 0;
+let mediaSource = new MediaSource();
+let sourceBuffer;
+
+audioPlayer.src = URL.createObjectURL(mediaSource);
+
+mediaSource.addEventListener('sourceopen', handleSourceOpen);
+
+function handleSourceOpen() {
+  const mime = 'audio/mpeg'; // MIME type for MP3 files
+  sourceBuffer = mediaSource.addSourceBuffer(mime);
+  loadSong(currentSongIndex);
+}
+
+function loadSong(index) {
+  fetch(playlist[index])
+    .then(response => response.arrayBuffer())
+    .then(data => {
+      sourceBuffer.appendBuffer(data);
+    })
+    .catch(error => console.error('Error loading song:', error));
+}
+
+function playSong() {
+  audioPlayer.play();
+}
+
+function pauseSong() {
+  audioPlayer.pause();
+}
+
+function stopSong() {
+  audioPlayer.pause();
+  audioPlayer.currentTime = 0;
+}
+
+function prevSong() {
+  currentSongIndex = (currentSongIndex - 1 + playlist.length) % playlist.length;
+  resetSourceBuffer();
+  loadSong(currentSongIndex);
+  playSong();
+}
+
+function nextSong() {
+  currentSongIndex = (currentSongIndex + 1) % playlist.length;
+  resetSourceBuffer();
+  loadSong(currentSongIndex);
+  playSong();
+}
+
+function resetSourceBuffer() {
+  mediaSource.removeSourceBuffer(sourceBuffer);
+  sourceBuffer = mediaSource.addSourceBuffer('audio/mpeg');
+}
+
+function setVolume(volume) {
+  audioPlayer.volume = volume;
+}
+
+playButton.addEventListener('click', playSong);
+pauseButton.addEventListener('click', pauseSong);
+stopButton.addEventListener('click', stopSong);
+prevButton.addEventListener('click', prevSong);
+nextButton.addEventListener('click', nextSong);
+volumeSlider.addEventListener('input', (event) => {
+  setVolume(event.target.value);
+});
+
+// Initial setup
+audioPlayer.volume = volumeSlider.value;