In this guide, we will walk you through creating a neon-style MP3 music player using HTML, CSS, and JavaScript. This player will have a dark red background, a glowing neon effects. We will also cover how to set up the font family for a polished look.
Step 1: Setting Up the Directory Structure
First, ensure your project folder has the following structure:
Project-folder/
├── index.html
├── styles.css
├── scripts.js
├── Images.jp
└── Music.mp3
Step 2: HTML Structure
Create an index.html file
and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<title>Music Player</title>
</head>
<body>
<section>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span> <span></span>
<span></span> <span></span> <span></span>
</section>
<div class="music-player" id="music-player">
<div class="header">
<h1>Endless Dev</h1>
</div>
<div class="music-info">
<h4 class="title" id="title">Tu Aake dekhle</h4>
<p class="artist" id="artist">Artist: King</p>
<p class="artist" id="artist">Album: The Carnival</p>
</div>
<div class="progress-container" id="progress-container">
<div class="progress" id="progress"></div>
</div>
<audio src="Songs/Tu Aake dekhle.mp3" id="audio"></audio>
<div class="new">
<div class="img-container">
<img src="Carnival.jfif" alt="music-cover" id="cover" />
</div>
</div>
<div class="navigation">
<button id="prev" class="action-btn">
<i class="fa fa-backward" aria-hidden="true"></i>
</button>
<button id="play" class="action-btn action-btn-big">
<i class="fa fa-play" aria-hidden="true"></i>
</button>
<button id="next" class="action-btn">
<i class="fa fa-forward" aria-hidden="true"></i>
</button>
</div>
<div class="volume-container">
<i class="fa fa-volume-up" aria-hidden="true"></i>
<input type="range" id="volume" min="0" max="100" value="50" />
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
Step 3: CSS Styling
Create a styles.css file and add the following code to style the player:
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");
* {
outline: none;
box-sizing: border-box;
}
body {
background-color: #01022b;
/* dark red background color */
font-family: "Josefin Sans";
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
cursor: none;
}
.music-player {
background-color: #6d0404;
border-radius: 15px;
box-shadow: 0 20px 20px 0 #000000b4;
display: flex;
flex-direction: column;
padding: 20px 30px;
position: relative;
margin: 100px 0;
z-index: 10;
width: 300px;
}
.header {
background-color: #333435;
text-align: center;
color: #fff;
border-radius: 15px 15px 0 0;
}
.music-info {
display: flex;
flex-direction: column;
align-items: center;
}
.title {
font-size: 24px;
font-weight: bold;
color: #fffffe;
margin: 10px 0 10px 0;
}
.artist {
font-size: 16px;
color: #d3d5db;
margin: 5px 0 5px 0;
}
.progress-container {
width: 100%;
height: 10px;
background-color: #ddd;
border-radius: 10px;
overflow: hidden;
margin: 20px 0;
}
.progress {
width: 0;
height: 100%;
background-color: #90fc03;
border-radius: 10px;
transition: width 0.5s;
}
.new {
padding-left: 30px;
}
.img-container img {
width: 90%;
height: 90%;
border-radius: 20px;
}
.navigation {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
.action-btn {
box-shadow: 0 15px 15px 0 #050505b4;
border-radius: 10px;
background-color: #f8b013;
border: none;
padding: 8px 20px;
font-size: 15px;
cursor: pointer;
}
.action-btn-big {
padding: 10px 30px;
font-size: 20px;
}
.volume-container {
display: flex;
align-items: center;
margin-top: 20px;
padding-right: 10px;
}
.volume-container i {
font-size: 22px;
margin-right: 10px;
}
.volume-container input[type="range"] {
width: 1000px;
height: 10px;
background-color: #f7f7f7;
border-radius: 10px;
padding: 0;
margin: 0;
}
.volume-container input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background-color: #4CAF50;
border-radius: 50%;
cursor: pointer;
}
section {
position: absolute;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
gap: 2px;
flex-wrap: wrap;
overflow: hidden;
}
section::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(#000, #ff1100, #000);
animation: animate 5s linear infinite;
}
@keyframes animate {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
}
section span {
position: relative;
display: block;
width: calc(6.25vw - 2px);
height: calc(6.25vw - 2px);
background: #181818;
z-index: 2;
transition: 1.2s;
}
section span:hover {
background: #a10404;
transition: 0s;
}
section span {
width: calc(5vw - 2px);
height: calc(5vw - 2px);
}
Step 4: JavaScript Functionality
Create a scripts.js file and add the following code to add functionality to the player:
const audio = document.getElementById("audio");
const playBtn = document.getElementById("play");
const prevBtn = document.getElementById("prev");
const nextBtn = document.getElementById("next");
const progressContainer = document.getElementById("progress-container");
const progress = document.getElementById("progress");
const volumeInput = document.getElementById("volume");
let isPlaying = false;
let currentSong = 0;
let songs = [
// Add more songs to the array
];
// Event listeners
playBtn.addEventListener("click", togglePlay);
prevBtn.addEventListener("click", prevSong);
nextBtn.addEventListener("click", nextSong);
volumeInput.addEventListener("input", changeVolume);
audio.addEventListener("timeupdate", updateProgress);
audio.addEventListener("ended", nextSong);
// Functions
function togglePlay() {
if (isPlaying) {
audio.pause();
playBtn.innerHTML = "<i class='fa fa-play'></i>";
} else {
audio.play();
playBtn.innerHTML = "<i class='fa fa-pause'></i>";
}
isPlaying = !isPlaying;
}
function prevSong() {
currentSong--;
if (currentSong < 0) {
currentSong = songs.length - 1;
}
updateSong();
}
function nextSong() {
currentSong++;
if (currentSong >= songs.length) {
currentSong = 0;
}
updateSong();
}
function updateSong() {
audio.src = songs[currentSong].src;
document.getElementById("title").innerHTML = songs[currentSong].title;
document.getElementById("artist").innerHTML = songs[currentSong].artist;
audio.play();
}
function changeVolume() {
audio.volume = volumeInput.value / 100;
}
function updateProgress() {
const progressWidth = (audio.currentTime / audio.duration) * 100;
progress.style.width = `${progressWidth}%`;
}
Explanation
HTML:
The index.html file contains the structure of the MP3 player, including the audio element, controls, and a playlist.
CSS:
The styles.css file styles the player with a neon effect, sets the font family, and adjusts the layout.
The playlist items have hover effects to indicate interactivity.
JavaScript:
The scripts.js file dynamically generates the playlist, handles play/pause functionality, updates the track title, and manages the progress bar and volume control.
Conclusion
By following these steps, you can create a stylish and functional neon-style MP3 music player with a playlist. This player can be easily customized and extended to include more features as needed. Happy coding!
