tajulafreen · tajulafreen · Dec 21, 2024 · Dec 21, 2024 · Dec 21, 2024 · Dec 21, 2024
diff --git a/README.md b/README.md
@@ -441,6 +441,17 @@ In order to run this project you need:
 </details>
 </li>
 
+<li>
+<details>
+<summary>Music Player</summary>
+<p>A simple, user-friendly Music Player built using HTML, CSS, and JavaScript. This app allows users to upload and manage their favorite songs dynamically, creating a personalized playlist.</p>
+<ul>
+<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/MusicPlayer/">Live Demo</a></li>
+<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/MusicPlayer">Source</a></li>
+</ul> 
+</details>
+</li>
+
 </ol>
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>

diff --git a/Source-Code/MusicPlayer/index.html b/Source-Code/MusicPlayer/index.html
@@ -0,0 +1,35 @@
+<!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>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <div class="music-player">
+      <h1>Music Player</h1>
+      <div class="player">
+        <h2 id="song-title">No song playing</h2>
+        <audio id="audio"></audio>
+        <div class="controls">
+          <button id="prev">⏮️</button>
+          <button id="play">▶️</button>
+          <button id="next">⏭️</button>
+        </div>
+        <input type="range" id="volume" min="0" max="1" step="0.01" value="1">
+      </div>
+      <div class="song-list">
+        <h3>Your Playlist</h3>
+        <ul id="playlist"></ul>
+      </div>
+      <div class="add-song">
+        <h3>Add Your Songs</h3>
+        <input type="file" id="file-input" accept="audio/*">
+        <button id="add-song-btn">Add Song</button>
+      </div>
+    </div>
+    <script src="script.js"></script>
+
+</body>
+</html>
diff --git a/Source-Code/MusicPlayer/script.js b/Source-Code/MusicPlayer/script.js
@@ -0,0 +1,95 @@
+// script.js
+
+const audio = document.getElementById('audio');
+const songTitle = document.getElementById('song-title');
+const playButton = document.getElementById('play');
+const nextButton = document.getElementById('next');
+const prevButton = document.getElementById('prev');
+const volumeControl = document.getElementById('volume');
+const playlist = document.getElementById('playlist');
+const fileInput = document.getElementById('file-input');
+const addSongButton = document.getElementById('add-song-btn');
+
+const songs = [];
+let currentSongIndex = 0;
+
+// Load song by index
+const loadSong = (index) => {
+  const song = songs[index];
+  audio.src = song.src;
+  songTitle.textContent = song.title;
+};
+
+// Play/Pause functionality
+const togglePlay = () => {
+  if (audio.paused) {
+    audio.play();
+    playButton.textContent = '⏸️';
+  } else {
+    audio.pause();
+    playButton.textContent = '▶️';
+  }
+};
+
+// Next song
+const nextSong = () => {
+  currentSongIndex = (currentSongIndex + 1) % songs.length;
+  loadSong(currentSongIndex);
+  audio.play();
+  playButton.textContent = '⏸️';
+};
+
+// Previous song
+const prevSong = () => {
+  currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
+  loadSong(currentSongIndex);
+  audio.play();
+  playButton.textContent = '⏸️';
+};
+
+// Volume control
+const changeVolume = () => {
+  audio.volume = volumeControl.value;
+};
+
+// Update playlist display
+const updatePlaylist = () => {
+  playlist.innerHTML = '';
+  songs.forEach((song, index) => {
+    const li = document.createElement('li');
+    li.textContent = song.title;
+    li.addEventListener('click', () => {
+      currentSongIndex = index;
+      loadSong(currentSongIndex);
+      audio.play();
+      playButton.textContent = '⏸️';
+    });
+    playlist.appendChild(li);
+  });
+};
+// Add a song to the playlist
+function addSong(file) {
+  const song = {
+    title: file.name,
+    src: URL.createObjectURL(file),
+  };
+  songs.push(song);
+  updatePlaylist();
+}
+
+// Event listeners
+playButton.addEventListener('click', togglePlay);
+nextButton.addEventListener('click', nextSong);
+prevButton.addEventListener('click', prevSong);
+volumeControl.addEventListener('input', changeVolume);
+
+addSongButton.addEventListener('click', () => {
+  const file = fileInput.files[0];
+  if (file) {
+    addSong(file);
+    fileInput.value = ''; // Reset file input
+  }
+});
+
+// Initialize player with no songs
+songTitle.textContent = 'No song playing';
diff --git a/Source-Code/MusicPlayer/style.css b/Source-Code/MusicPlayer/style.css
@@ -0,0 +1,86 @@
+/* styles.css */
+body {
+  font-family: Arial, sans-serif;
+  background-color: #1e1e2f;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+}
+
+.music-player {
+  text-align: center;
+  background: #29293d;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+  width: 300px;
+}
+
+.player h2 {
+  font-size: 18px;
+  margin-bottom: 20px;
+}
+
+.controls {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+  margin-bottom: 15px;
+}
+
+.controls button {
+  background: #3b3b57;
+  color: white;
+  border: none;
+  padding: 10px 15px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.add-song button {
+  background: #3b3b57;
+  color: white;
+  border: none;
+  padding: 10px;
+  margin-top: 10px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.controls button:hover {
+  background: #50506b;
+}
+
+#volume {
+  width: 100%;
+}
+
+.song-list ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.song-list li {
+  background: #3b3b57;
+  padding: 10px;
+  margin: 5px 0;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.song-list li:hover {
+  background: #50506b;
+}
+
+.add-song input {
+  margin-top: 10px;
+}
+
+.add-song button:hover {
+  background: #50506b;
+}