Music Player

—

by

in React JS Projects

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, and script.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.html file in your web browser to test the music player.

Comments

Leave a Reply Cancel reply