VS MUSIC PLAYER
Music player source code:
Here is the simplified source code for Music player in HTML, CSS and JavaScript
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Music Player with Playlist</title>
<style>
#mp-container {
display: flex;
justify-content: center;
align-items: top;
height: auto;
background-color:#f0f0f0;
margin: 0;
}
.music-player {
background: #fff;
padding: 10px;
box-shadow: inset 0 0 12px #007bff;
border-radius: 10px;
text-align: center;
margin:5px;
border:2px solid blue;
}
.controls {
display: inline;
align-items: center;
margin-top: 20px;
}
.controls button {
padding: 10px 20px;
border: none;
background-color: #007bff;
color: white;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
box-shadow: 0 0 6px gray;
}
.controls button:hover {
background-color: #0056b3;
}
#progress-bar {
width: 100%;
margin-top: 10px;
color:red;
}
#file-input {
margin: 10px auto;
background:#007bff;
color:#fff;
text-align:center;
padding:7px;
border-radius:6px;
font-size:16px;
font-weight:800;
box-shadow:0 0 6px black;
border:1px solid blue;
}
#playlist {
list-style: decimal;
padding: 10px;
margin:20px 4px;
width: 95%;
text-align: left;
background:black;
color:white;
}
#playlist li {
padding: 5px 10px;
cursor: pointer;
}
#playlist li:hover {
background-color:blue;
color:white;
}
#playlist li.active {
font-weight: bold;
}
audio {
background:blue;
padding:7px;
border-radius:30px;
color: black;
box-shadow: 0 0 6px black;
}
</style>
</head>
<body>
<div id="mp-container">
<div class="music-player">
<div style="background:tomato; border-radius:18px; box-shadow: 0 0 10px black; margin:10px auto;text-align:center;font-size:20px;padding:10px;font-weight:800;width:70%;">VS MUSIC PLAYER </div>
<input type="file" id="file-input" accept="audio/*" multiple>
<audio id="audio" controls></audio>
<div class="controls">
<button id="prev">Previous</button>
<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="next">Next</button>
<input type="range" id="progress-bar" value="0">
</div>
<ul id="playlist"></ul>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const audio = document.getElementById('audio');
const playButton = document.getElementById('play');
const pauseButton = document.getElementById('pause');
const prevButton = document.getElementById('prev');
const nextButton = document.getElementById('next');
const progressBar = document.getElementById('progress-bar');
const fileInput = document.getElementById('file-input');
const playlistElement = document.getElementById('playlist');
let playlist = [];
let currentTrackIndex = 0;
playButton.addEventListener('click', function () {
if (playlist.length > 0) {
audio.play();
}
});
pauseButton.addEventListener('click', function () {
audio.pause();
});
prevButton.addEventListener('click', function () {
if (currentTrackIndex > 0) {
playTrack(currentTrackIndex - 1);
} else {
playTrack(playlist.length - 1); // Loop back to the last track
}
});
nextButton.addEventListener('click', function () {
if (currentTrackIndex < playlist.length - 1) {
playTrack(currentTrackIndex + 1);
} else {
playTrack(0); // Loop back to the first track
}
});
audio.addEventListener('timeupdate', function () {
progressBar.value = (audio.currentTime / audio.duration) * 100;
});
progressBar.addEventListener('input', function () {
audio.currentTime = (progressBar.value / 100) * audio.duration;
});
fileInput.addEventListener('change', function (event) {
const files = event.target.files;
playlist = [];
playlistElement.innerHTML = '';
for (let i = 0; i < files.length; i++) {
const file = files[i];
playlist.push(file);
const li = document.createElement('li');
li.textContent = file.name;
li.addEventListener('click', () => playTrack(i));
playlistElement.appendChild(li);
}
if (playlist.length > 0) {
playTrack(0);
}
});
audio.addEventListener('ended', function () {
if (currentTrackIndex < playlist.length - 1) {
playTrack(currentTrackIndex + 1);
} else {
currentTrackIndex = 0; // Loop back to the first track when the last one ends
playTrack(currentTrackIndex);
}
});
function playTrack(index) {
currentTrackIndex = index;
const file = playlist[index];
const url = URL.createObjectURL(file);
audio.src = url;
audio.load();
audio.play();
updatePlaylistUI();
console.log(`Playing track ${index + 1}: ${file.name}`);
}
function updatePlaylistUI() {
const items = playlistElement.getElementsByTagName('li');
for (let i = 0; i < items.length; i++) {
items[i].classList.remove('active');
if (i === currentTrackIndex) {
items[i].classList.add('active');
}
}
}
});
</script>
</body>
</html>
Explanation
Multiple File Input: The <input type="file" id="file-input" accept="audio/*" multiple> element allows selecting multiple files.
Playlist Array: An array playlist is used to store the selected files.
Track Index: A variable currentTrackIndex keeps track of the currently playing track.
Playlist UI: A <ul> element displays the playlist. Each file gets an <li> element which users can click to play the respective track.
Play Track Function: The playTrack function handles playing a track from the playlist and updating the UI.
Auto-play Next Track: The audio element's ended event listener plays the next track when the current one ends.
Update UI: The updatePlaylistUI function visually indicates the currently playing track in the playlist.
🔥 Buy Now
✨ See Price
👉 Shop Now
🛒 View on Amazon
2 Comments
mobile phone (android) is not play Local Audio Player play list
ReplyDeletemobile phone (android) is not play Local Audio Player playlist
ReplyDelete