ghjjk

Music Player with LRC

body{
margin:0;
font-family:Arial;
background:linear-gradient(135deg,#1e3c72,#2a5298);
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
color:white;
}

.container{
width:720px;
background:rgba(255,255,255,0.12);
backdrop-filter:blur(10px);
border-radius:20px;
padding:20px;
text-align:center;
}

img{
width:125px;
height:125px;
border-radius:15px;
object-fit:cover;
}

audio{
width:100%;
margin:15px 0;
}

/* Lyrics box */
.lyrics{
height:600px;
overflow:auto;
text-align:center;
padding:10px;
background:rgba(0,0,0,0.2);
border-radius:10px;
font-size:14px;
line-height:1.8;
}

.line{
opacity:0.5;
transition:0.3s;
}

.active{
opacity:1;
color:#00ffcc;
font-weight:bold;
transform:scale(1.75);
}

// ===== LRC PARSER =====
const lrcText = `
[ar: Meet Bros Anjjan & Kanika Kapoor]
[al: Bollywood Tapori Songs]
[ti: Chittiyaan Kalaiyaan (From “Roy”)]
[au: Meet Bros Anjjan]
[length: 04:06]

[00:04.01]Kalaiyaan kalaiyaan
[00:17.93]Tu leya de mainu golden jhumke (Jhumke)
[00:22.76]Main kanna vich paavan chum chum ke (Chum ke)
[00:27.69]Tu leya de mainu golden jhumke
[00:29.90]Main kanna vich paavan chum chum ke
[00:32.39]Tu leya de mainu golden jhumke
[00:34.70]Main kanna vich paavan chum chum ke
[00:36.86]
[00:37.32]Mann jaa ve mainu shopping kara de
[00:42.16]Mann jaa ve romantic picture dikha de
[00:46.65]Requestaan paayiaan ve
[00:48.69]
[00:49.28]Chittiyaan kalaiyaan ve
[00:51.02]Oh baby meri chittiyan kalaiyaan ve (He)
[00:54.10]Chittiyaan kalaiyaan ve
[00:56.02]Oh baby meri white kalaiyaan ve (Ho)
[00:59.00]Chittiyaan kalaiyaan ve
[01:00.78]Oh baby meri tere hisse aayiaan ve (Ok)
[01:03.82]Chittiyaan kalaiyaan ve
[01:05.56]Oh baby meri chittiyan kalaiyaan ve (Ho)
[01:08.33]
[01:08.60]Mann jaa ve mainu shopping kara de
[01:13.13]Mann jaa ve romantic picture dikha de
[01:17.80]Requestaan paayiaan ve
[01:19.87]
[01:20.46]Chittiyaan kalaiyaan ve
[01:22.33]Oh baby meri chittiyan kalaiyaan ve (He)
[01:25.33]Chittiyaan kalaiyaan ve
[01:26.77]Oh baby meri white kalaiyaan ve (Ho)
[01:30.10]Chittiyaan kalaiyaan ve
[01:31.79]Oh baby meri tere hisse aayiaan ve (He)
[01:35.03]Chittiyaan kalaiyaan ve
[01:36.57]Oh baby meri chittiyan kalaiyaan ve (Ho)
[01:39.49]
[01:59.12]You’re my darling angel baby
[02:01.49]White kalaiyaan drives me crazy
[02:03.89]Shiney eyes say glitt glitt glittery
[02:06.26]You’re the light that makes me go hazy
[02:08.42]
[02:08.58]You’re my darling angel baby
[02:11.14]White kalaiyaan drives me crazy
[02:13.39]Shiney eyes say glitt glitt glittery
[02:15.94]You’re the light that makes me go hazy (Makes me go hazy)
[02:20.35]
[02:19.90]Oh mainu chadhiya hai rang rang
[02:22.60]Main khwabaan de sang sang aaj ud di phiran
[02:26.98]Main saari raat ud di phiran
[02:29.45]Oh badle jindadi de rang dhang
[02:32.02]
[02:32.33]Meri neendein bhi tang tang aaj ud di phiran
[02:36.57]Main saari raat ud di phiran
[02:39.23]Mann jaa ve gulabi chunni dava de
[02:44.35]Mann jaa ve colourful choodi pavaa de
[02:48.86]Requestaan paayiaan ve
[02:50.89]
[02:51.65]Chittiyaan kalaiyaan ve
[02:53.36]Oh baby meri chittiyan kalaiyaan ve (He)
[02:56.58]Chittiyaan kalaiyaan ve
[02:58.16]Oh baby meri white kalaiyaan ve (Ho)
[03:01.09]Chittiyaan kalaiyaan ve
[03:02.96]Oh baby meri tere hisse aayiaan ve (He)
[03:06.03]Chittiyaan kalaiyaan ve
[03:07.72]Oh baby meri chittiyan kalaiyaan ve (Ho)
[03:10.57]
[03:10.62]Ghumde phirde saare chitiyaan milgiyan
[03:16.94]Chittiyaan kalaaiyan ve (Kalaaiyan ve)
[03:20.29]Tere hathaan nu chumda rehnda
[03:24.92]Kam tu lai laiyaan oh chittiyaan ve (Oh chittiyaan ve)
[03:29.61]
[03:30.15]Mann jaa ve mainu shopping kara de
[03:34.86]Mann jaa ve romantic picture dikha de
[03:39.33]Requestaan paayiaan ve
[03:42.01]
[03:42.20]Chittiyaan kalaiyaan ve
[03:43.88]Oh baby meri chittiyan kalaiyaan ve
[03:46.93]Chittiyaan kalaiyaan ve
[03:48.80]Oh baby meri white kalaiyaan ve (Ho)
[03:51.72]Chittiyaan kalaiyaan ve
[03:53.47]Oh baby meri tere hisse aayiaan ve (He)
[03:56.54]Chittiyaan kalaiyaan ve
[03:58.45]Oh baby meri chittiyan kalaiyan ve (Ho)
[04:01.38]
`;

const audio = document.getElementById(“audio”);
const lyricsBox = document.getElementById(“lyrics”);

// Convert LRC to array
function parseLRC(lrc) {
return lrc.trim().split(“\n”).map(line => {
const match = line.match(/\[(\d+):(\d+\.\d+)\](.*)/);
if (!match) return null;

const min = parseInt(match[1]);
const sec = parseFloat(match[2]);
return {
time: min * 60 + sec,
text: match[3].trim()
};
}).filter(Boolean);
}

const lyrics = parseLRC(lrcText);

// render lyrics
lyrics.forEach((l, i) => {
const div = document.createElement(“div”);
div.className = “line”;
div.id = “line-” + i;
div.innerText = l.text;
lyricsBox.appendChild(div);
});

// sync lyrics with audio
audio.ontimeupdate = () => {
let current = audio.currentTime;

lyrics.forEach((l, i) => {
const el = document.getElementById(“line-” + i);

if (current >= l.time) {
document.querySelectorAll(“.line”).forEach(e => e.classList.remove(“active”));
el.classList.add(“active”);
el.scrollIntoView({behavior:”smooth”, block:”center”});
}
});
};