HTML
htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Music Player</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="music-player">
<h2 id="track-title">Track Title</h2>
<audio id="audio" controls>
<source src="your-audio-file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</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>
CSS (styles.css)
cssCopy codebody {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.music-player {
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
.controls button {
margin: 5px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
JavaScript (script.js)
javascriptCopy codeconst audio = document.getElementById('audio');
const playButton = document.getElementById('play');
const pauseButton = document.getElementById('pause');
const stopButton = document.getElementById('stop');
const trackTitle = document.getElementById('track-title');
playButton.addEventListener('click', () => {
audio.play();
trackTitle.textContent = "Playing: " + audio.currentSrc.split('/').pop();
});
pauseButton.addEventListener('click', () => {
audio.pause();
});
stopButton.addEventListener('click', () => {
audio.pause();
audio.currentTime = 0; // Reset to start
trackTitle.textContent = "Track Title";
});
Instructions
- Set Up Your Files: Create three files in the same directory:
index.html,styles.css, andscript.js. - Add Your Audio File: Replace
"your-audio-file.mp3"in the HTML code with the path to your audio file. - Open in a Browser: Open the
index.htmlfile in your web browser to test the music player.
Music Player