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.
2 Comments
mobile phone (android) is not play Local Audio Player play list
ReplyDeletemobile phone (android) is not play Local Audio Player playlist
ReplyDelete"Thank you for taking the time to engage with this post! We value thoughtful and constructive comments that contribute to the discussion. Please keep your comments respectful and on-topic. We encourage you to share your insights, ask questions, and participate in meaningful conversations. Note that comments are moderated, and any inappropriate or spammy content will be removed. We look forward to hearing your thoughts!"