I has music player working but when i code for the playlist that will not work as the playlist doesn’t have that select option
I have tried many things but didn’t work
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Player</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://kit.fontawesome.com/7b8906bc16.js" crossorigin="anonymous"></script>
<!--class container -->
<div class="musicplayer">
<div class="outputscreen">
<span class="name"></span>
</div>
<div class="disk"></div>
<!--audio-->
<audio id="song" onended="playnext()">
<source src="" type="audio/mpeg">
</audio>
<!--silder-->
<div class="song-slider">
<input type="range" value="0" class="seek-bar" id="progress">
<div class="controls"> <!--control-->
<div onclick="playprevious()"><i class="fa-solid fa-backward"></i></div>
<div onclick="playpause()"><i class="fa-solid fa-play" id="ctrlIcon"></i></div>
<div onclick=" playnext()"><i class="fa-solid fa-forward"></i></div>
</div>
</div>
<script src="script.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
let songs = [
{
name: "LEO - Lokiverse 2.0",
source: "music/LEO - Lokiverse 2.0 Theme Video _ Thalapathy Vijay _ Anirudh Ravichander _ Lokes.m4a",
image: "images/loki.jpeg"
},
{
name: "LEO - badass",
source: "music/LEO - Badass Lyric _ Thalapathy Vijay _ Lokesh Kanagaraj _ Anirudh Ravichander.m4a",
image: "images/badass.jpeg"
},
{
name: "LEO - I am Scared",
source: "music/LEO - Im Scared Lyric _ Thalapathy Vijay _ Anirudh Ravichander _ Lokesh Kanagara.m4a",
image: "images/scared.jpeg"
},
{
name: "Once Upon a Time",
source: "music/Once Upon A Time Video _ VIKRAM _ Kamal Haasan _ Anirudh Ravichander _ Lokesh Ka.m4a",
image: "images/once.jpeg"
},
{
name: "PABLO ESCOBAR",
source: "music/Pablo Sandhanam Theme Video - Vikram _ Kamal Haasan _ ANIRUDH RAVICHANDER _ Loke.m4a",
image: "images/pablo.jpeg"
},
{
name: "LEO - ORDINARY PERSON ",
source: "music/LEO - Ordinary Person Lyric _ Thalapathy Vijay, Anirudh Ravichander, Lokesh Kana.m4a",
image: "images/ordinsary.jpeg"
}
];
let currentIndex = 0;
let progress = document.getElementById(‘progress’);
let song = document.getElementById(‘song’);
let ctrlIcon = document.getElementById(‘ctrlIcon’);
let disk = document.querySelector(‘.disk’);
const outputscreen = document.querySelector(‘.outputscreen .name’);
function updateoutputscreen() {
outputscreen.textContent = songs[currentIndex].name;
}
song.addEventListener(‘loadedmetadata’, updateoutputscreen);
function loadSong(index) {
song.src = songs[index].source;
disk.style.backgroundImage = `url(${songs[index].image})`;
song.onloadedmetadata = function() {
progress.max = song.duration;
progress.value = song.currentTime;
};
}
function playpause() {
if (ctrlIcon.classList.contains("fa-pause")) {
song.pause();
ctrlIcon.classList.remove("fa-pause");
ctrlIcon.classList.add("fa-play");
disk.style.animationPlayState = "paused";
} else {
song.play();
ctrlIcon.classList.remove("fa-play");
ctrlIcon.classList.add("fa-pause");
disk.style.animationPlayState = "running";
}
}
function playnext() {
currentIndex = (currentIndex + 1) % songs.length;
loadSong(currentIndex);
song.play();
}
function playprevious() {
currentIndex = (currentIndex - 1 + songs.length) % songs.length;
loadSong(currentIndex);
song.play();
}
if (song.play) {
setInterval(() => {
progress.value = song.currentTime;
}, 500);
}
progress.onchange = function() {
if (!song.paused){
song.play();
}
song.currentTime = progress.value;
}
loadSong(currentIndex);
song.onended = function(){
playnext();
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #ffffff ;
font-family: 'roboto', sans-serif;
}
.musicplayer{
position: fixed;
align-items: center;
width: 350px;
height: 550px;
padding-left: 1000px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.854);
box-shadow: 0 40px 100px rgba(225, 225, 225, 0.1);
padding: 30px;
overflow: hidden;
color:#fff;
}
.disk{
position: relative;
display: block;
margin: 40px auto;
width: 180px;
height: 180px;
border-radius: 50%;
background-image: url(images/loki.jpeg);
background-size: cover;
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.08);
animation: rotate 16s infinite linear;
}
.disk::before{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: #4169e1;
}
.song-slider{
width: 100%;
position: relative;
}
.seek-bar{
-webkit-appearance: none;
width: 100%;
height: 5px;
border-radius: 10px;
background: #ADD8E6;
overflow: hidden;
cursor: pointer;
}
.seek-bar::-webkit-slider-thumb{
-webkit-appearance: none;
width: 10px;
height: 20px;
background: #808080;
box-shadow: -400px 0 0 400px #d5eed5;
}
.controls{
display: flex;
justify-content: center;
align-items: center;
}
.controls div{
width: 60px;
height: 60px;
margin: 20px;
background: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: rgb(52, 49, 245);
box-shadow: 0 10px 20px rgba(225, 26, 26, 0.22);
cursor: pointer;
}
.controls div:nth-child(2){
transform: scale(1.5);
background: #313bf5;
color: #fff;
}
.name {
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
text-transform: capitalize;
font-size: 20px;
font-weight: 500;
}
@keyframes rotate{
from{
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
make a playlist that includes to this music player
