└── README.md


/README.md:
--------------------------------------------------------------------------------
 1 | # music-player-using-javascript
 2 | <title>Music Player</title> <style> body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #1e1e1e; color: white; }
 3 |     .player {
 4 |         background: #333;
 5 |         padding: 20px;
 6 |         border-radius: 10px;
 7 |         text-align: center;
 8 |         box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.2);
 9 |     }
10 | 
11 |     .controls {
12 |         display: flex;
13 |         justify-content: center;
14 |         gap: 10px;
15 |         margin-top: 15px;
16 |     }
17 | 
18 |     button {
19 |         background-color: #6200ea;
20 |         color: white;
21 |         border: none;
22 |         padding: 10px 20px;
23 |         font-size: 20px;
24 |         cursor: pointer;
25 |         border-radius: 5px;
26 |     }
27 | 
28 |     button:hover {
29 |         background-color: #3700b3;
30 |     }
31 | 
32 |     #volume {
33 |         width: 80%;
34 |         margin-top: 15px;
35 |     }
36 | </style>
37 | <div class="player">
38 |     <h2>Simple Music Player</h2>
39 |     <audio id="audio" src="song1.mp3"></audio>
40 |     <div class="controls">
41 |         <button id="prev">⏮</button>
42 |         <button id="play">▶</button>
43 |         <button id="next">⏭</button>
44 |     </div>
45 |     <input type="range" id="volume" min="0" max="1" step="0.1">
46 | </div>
47 | 
48 | <script>
49 |     const audio = document.getElementById("audio");
50 |     const playButton = document.getElementById("play");
51 |     const prevButton = document.getElementById("prev");
52 |     const nextButton = document.getElementById("next");
53 |     const volumeControl = document.getElementById("volume");
54 | 
55 |     const songs = ["song1.mp3", "song2.mp3", "song3.mp3"];
56 |     let songIndex = 0;
57 | 
58 |     playButton.addEventListener("click", () => {
59 |         if (audio.paused) {
60 |             audio.play();
61 |             playButton.innerText = "⏸";
62 |         } else {
63 |             audio.pause();
64 |             playButton.innerText = "▶";
65 |         }
66 |     });
67 | 
68 |     nextButton.addEventListener("click", () => {
69 |         songIndex = (songIndex + 1) % songs.length;
70 |         audio.src = songs[songIndex];
71 |         audio.play();
72 |         playButton.innerText = "⏸";
73 |     });
74 | 
75 |     prevButton.addEventListener("click", () => {
76 |         songIndex = (songIndex - 1 + songs.length) % songs.length;
77 |         audio.src = songs[songIndex];
78 |         audio.play();
79 |         playButton.innerText = "⏸";
80 |     });
81 | 
82 |     volumeControl.addEventListener("input", () => {
83 |         audio.volume = volumeControl.value;
84 |     });
85 | </script>
86 | 


--------------------------------------------------------------------------------