<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Music & Lyric Video Player</title>
<style>
body {
margin: 0; font-family: Arial, sans-serif; background: #000; color: #fff;
}
h1 {
text-align: center; margin: 20px 0; font-size: 1.6rem; font-weight:
normal;
}
.audio-player {
width: 90%; max-width: 600px; margin: 0 auto 20px; background:
#1a1a1a;
border-radius: 8px; box-shadow: 0 2px 5px rgba(255,255,255,0.1);
padding: 16px; display: flex; flex-direction: column; align-items: center;
}
.audio-player img {
width: 200px; height: 200px; object-fit: cover; margin-bottom: 16px;
border: 2px solid #fff; border-radius: 4px; background: #333;
}
.audio-player .controls {
display: flex; gap: 10px; margin-bottom: 16px;
}
.audio-player .controls button {
padding: 8px 12px; background: #444; color: #fff; border: none;
border-radius: 4px;
cursor: pointer; font-size: 1.2rem;
}
.audio-player .controls button:hover { background: #555; }
.progress-container {
width: 100%; display: flex; align-items: center; gap: 8px;
}
#progressBar { flex: 1; cursor: pointer; }
#currentTime, #duration {
font-family: monospace; font-size: 0.9rem; min-width: 40px; text-align:
center;
}
.song-list {
width: 90%; max-width: 600px; margin: 0 auto 20px; background:
#1a1a1a;
border-radius: 8px; box-shadow: 0 2px 5px rgba(255,255,255,0.1);
max-height: 250px; overflow-y: auto;
}
.song-item {
display: flex; align-items: center; padding: 10px; border-bottom: 1px
solid #333;
cursor: pointer; color: #fff; position: relative;
}
.song-item:last-child { border-bottom: none; }
.song-item:hover { background: #333; }
.song-item img {
width: 60px; height: 60px; object-fit: cover; border-radius: 4px;
border: 1px solid #444; flex-shrink: 0; margin-right: 10px; background:
#333;
}
.song-info { display: flex; flex-direction: column; flex: 1; }
.song-info h3 { margin: 0; font-size: 1rem; font-weight: normal; }
.lyric-btn {
background: #444; color: #fff; border: none; border-radius: 4px;
padding: 6px 10px;
cursor: pointer; font-size: 0.8rem; margin-left: auto;
}
.lyric-btn:hover { background: #555; }
.video-player {
width: 90%; max-width: 600px; margin: 0 auto 40px; border-radius:
8px; overflow: hidden;
background: #1a1a1a; box-shadow: 0 2px 5px rgba(255,255,255,0.1);
padding: 16px;
}
.video-player video { width: 100%; border-radius: 8px; outline: none;
background: #000; }
</style>
</head>
<body>
<h1>My Music Player</h1>
<div class="audio-player">
<img id="currentCover"
src="[Link]
alt="Current Track Cover">
<div class="controls">
<button id="prevBtn" aria-label="Previous Track">⏮</button>
<button id="playPauseBtn" aria-label="Play or Pause">▶</button>
<button id="nextBtn" aria-label="Next Track">⏭</button>
<button id="shuffleBtn" aria-label="Shuffle">🔀 Off</button>
</div>
<div class="progress-container">
<span id="currentTime">0:00</span>
<input type="range" id="progressBar" min="0" max="100" value="0">
<span id="duration">0:00</span>
</div>
<audio id="audioElement" preload="metadata"></audio>
</div>
<div class="song-list" id="songList"></div>
<div class="video-player" id="videoSection">
<video id="videoElement" controls playsinline
preload="metadata"></video>
</div>
<script>
const tracks = [
{
title: "Audacity",
cover:
"[Link]
g?dl=1",
audio:
"[Link]
Reference.mp3?dl=1",
video:
"[Link]
4?dl=1",
},
{
title: "O.M.W",
cover:
"[Link]
dl=1",
audio: "[Link]
Reference.mp3?dl=1",
video:
"[Link]
dl=1",
},
{
title: "Nuisance",
cover:
"[Link]
ng?dl=1",
audio:
"[Link]
Reference.mp3?dl=1",
video:
"[Link]
4?dl=1",
},
{
title: "Go Off",
cover: "[Link]
[Link]?dl=1",
audio: "[Link]
Off-Rough.mp3?dl=1",
video: "[Link]
Off.mp4?dl=1",
},
{
title: "Stranger",
cover: "",
audio:
"[Link]
Reference.mp3?dl=1",
video: "",
},
{
title: "Don't Be Gone",
cover: "",
audio: "[Link]
Be-Gone-Reference.mp3?dl=1",
video: "",
},
{
title: "July",
cover: "",
audio: "[Link]
Reference.mp3?dl=1",
video: "",
},
{
title: "Yin & Yang",
cover: "[Link]
[Link]?dl=1",
audio: "[Link]
Yang-Reference.mp3?dl=1",
video: "[Link]
Yang.mp4?dl=1",
},
{
title: "New Body",
cover: "",
audio: "[Link]
Body-Reference.mp3?dl=1",
video: "",
},
{
title: "Our Last Goodbye",
cover: "[Link]
[Link]?dl=1",
audio: "[Link]
Last-Goodbye-LuisitoBX.m4a?dl=1",
video: "[Link]
Last-Goodbye-LuisitoBX-V3-4K.mp4?dl=1",
},
{
title: "Biggest Mistake",
cover: "",
audio:
"[Link]
Mistake-Rough.mp3?dl=1",
video: "",
},
];
let currentIndex = 0;
let isPlaying = false;
let isShuffle = false;
let audioElement, videoElement, progressBar, currentCover,
currentTimeDisplay, durationDisplay;
function formatTime(sec) {
const mins = [Link](sec / 60), s = [Link](sec % 60);
return `${mins}:${s < 10 ? "0" : ""}${s}`;
}
function loadTrack(index) {
currentIndex = index;
const track = tracks[currentIndex];
[Link] = [Link];
[Link] = [Link] ? [Link]
: "[Link]
isPlaying = false;
[Link]("playPauseBtn").textContent = "▶";
[Link]("loadedmetadata", () => {
[Link] = formatTime([Link]);
}, { once: true });
}
function nextTrack() {
if (isShuffle) {
let rnd;
do { rnd = [Link]([Link]() * [Link]); }
while (rnd === currentIndex);
currentIndex = rnd;
} else {
currentIndex++;
if (currentIndex >= [Link]) currentIndex = 0;
}
loadTrack(currentIndex);
[Link]();
[Link]().catch(e => [Link]("Autoplay blocked:", e));
}
function prevTrack() {
if (isShuffle) {
let rnd;
do { rnd = [Link]([Link]() * [Link]); }
while (rnd === currentIndex);
currentIndex = rnd;
} else {
currentIndex--;
if (currentIndex < 0) currentIndex = [Link] - 1;
}
loadTrack(currentIndex);
[Link]();
[Link]().catch(e => [Link]("Autoplay blocked:", e));
}
function toggleShuffle() {
isShuffle = !isShuffle;
const btn = [Link]("shuffleBtn");
[Link] = `🔀 ${isShuffle ? "On" : "Off"}`;
if (!isPlaying) {
[Link]().catch(e => [Link]("Autoplay blocked:", e));
}
}
function togglePlayPause() {
if (isPlaying) {
[Link]();
} else {
[Link]().catch(e => [Link]("Playback blocked:", e));
}
}
function updateProgress() {
if (!isNaN([Link])) {
const prog = ([Link] / [Link]) *
100;
[Link] = prog;
[Link] =
formatTime([Link]);
}
}
function seekAudio() {
const seekTime = ([Link] / 100) * [Link];
[Link] = seekTime;
}
function playLyricVideo(videoUrl, coverUrl) {
if (!videoUrl) return;
[Link] = coverUrl ||
"[Link]
[Link]();
[Link] = videoUrl;
[Link]().catch(e => [Link]("Video blocked:", e));
[Link]("videoSection").scrollIntoView({ behavior:
"smooth" });
}
function buildSongList() {
const list = [Link]("songList");
[Link]((track, i) => {
const item = [Link]("div");
[Link] = "song-item";
const thumb = [Link]("img");
[Link] = [Link]
? [Link]
: "[Link]
[Link](thumb);
const info = [Link]("div");
[Link] = "song-info";
const title = [Link]("h3");
[Link] = [Link];
[Link](title);
[Link](info);
if ([Link]) {
const lb = [Link]("button");
[Link] = "Lyric Video";
[Link] = "lyric-btn";
[Link]("click", e => {
[Link]();
playLyricVideo([Link], [Link]);
});
[Link](lb);
}
[Link]("click", () => {
loadTrack(i);
[Link]();
[Link] = "";
[Link]();
[Link]().catch(e => [Link]("Blocked:", e));
});
[Link](item);
});
}
[Link]("DOMContentLoaded", () => {
audioElement = [Link]("audioElement");
videoElement = [Link]("videoElement");
progressBar = [Link]("progressBar");
currentCover = [Link]("currentCover");
currentTimeDisplay = [Link]("currentTime");
durationDisplay = [Link]("duration");
buildSongList();
[Link]("playPauseBtn").addEventListener("click",
togglePlayPause);
[Link]("nextBtn").addEventListener("click",
nextTrack);
[Link]("prevBtn").addEventListener("click",
prevTrack);
[Link]("shuffleBtn").addEventListener("click",
toggleShuffle);
[Link]("timeupdate", updateProgress);
[Link]("ended", nextTrack);
[Link]("play", () => {
isPlaying = true;
[Link]("playPauseBtn").textContent = "⏸";
[Link](); // Pause video whenever audio starts
});
[Link]("pause", () => {
isPlaying = false;
[Link]("playPauseBtn").textContent = "▶";
});
[Link]("input", seekAudio);
loadTrack(0);
});
</script>
</body>
</html>