50Projects-HTML-CSS-JavaScript : Music player

README.md

@@ -441,6 +441,17 @@ In order to run this project you need:
 
 
 
+
+
+Music Player
+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.
+
+Live Demo
+Source
+ 
+
+
+
 
 
 (back to top)

Source-Code/MusicPlayer/index.html

@@ -0,0 +1,35 @@
+
+
+
+    
+    
+    Music Player
+    
+  
+  
+    
+      Music Player
+      
+        No song playing
+        
+        
+          ⏮️
+          ▶️
+          ⏭️
+        
+        
+      
+      
+        Your Playlist
+        
+      
+      
+        Add Your Songs
+        
+        Add Song
+      
+    
+    
+
+
+

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';

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;
+}