You can create a basic music player using HTML, CSS, and JavaScript. Below is a step-by-step guide.
1. Structure (HTML)
Create an index.html file with an audio element and controls.<!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="styles.css"> </head> <body> <div class="player"> <h2>Simple Music Player</h2> <audio id="audioPlayer" src="song.mp3"></audio> <div class="controls"> <button id="play">Play</button> <button id="pause">Pause</button> <button id="stop">Stop</button> </div> </div> <script src="script.js"></script> </body> </html>
2. Styling (CSS)
Create a styles.css file for styling the music player.body { font-family: Arial, sans-serif; text-align: center; background-color: #f4f4f4; } .player { background: white; padding: 20px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); display: inline-block; margin-top: 50px; } .controls button { margin: 5px; padding: 10px; border: none; background: #007BFF; color: white; cursor: pointer; border-radius: 5px; } .controls button:hover { background: #0056b3; }
3. Functionality (JavaScript)
Create a script.js file to handle audio control.document.addEventListener("DOMContentLoaded", function () { const audio = document.getElementById("audioPlayer"); const playBtn = document.getElementById("play"); const pauseBtn = document.getElementById("pause"); const stopBtn = document.getElementById("stop"); playBtn.addEventListener("click", () => { audio.play(); }); pauseBtn.addEventListener("click", () => { audio.pause(); }); stopBtn.addEventListener("click", () => { audio.pause(); audio.currentTime = 0; // Reset to beginning }); });
4. Add Music File
Make sure to have an MP3 file named song.mp3 in the same directory as your HTML file. You can change the src="song.mp3" in the <audio> tag to another file if needed.
How It Works
- Play Button â Starts the audio.
- Pause Button â Pauses the audio.
- Stop Button â Stops and resets the audio to the beginning.
This is a simple example. If you want features like playlists, volume control, or a progress bar, let me know!
No responses yet