Music Player 🎶

How to setup:

Paste in the code
Go down and put your image URL.
Go down and put your song URL.
Go down and put your song name.
Enjoy!

Preview

Code :

<!DOCTYPE html>

<head>

<title>by UNBL0CKEDZ0NE</title>

<style>

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {

font-family: 'Inter', sans-serif;

background: #3b4a6b;

color: #fff;

height: 100vh;

overflow: hidden;

display: flex;

flex-direction: column;

position: relative;

}

#bgBlur {

position: fixed;

inset: 0;

background-size: cover;

background-position: center;

filter: blur(60px) brightness(0.45) saturate(1.4);

transform: scale(1.1);

z-index: 0;

background-color: #3b4a6b;

}

#app { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.topbar {

display: flex;

align-items: center;

justify-content: space-between;

padding: 14px 20px;

font-size: 13px;

font-weight: 600;

color: rgba(255,255,255,0.85);

}

.art-area {

flex: 1;

display: flex;

align-items: center;

justify-content: center;

padding: 20px;

}

.album-card {

width: min(460px, 78vmin);

height: min(460px, 78vmin);

border-radius: 10px;

overflow: hidden;

box-shadow: 0 30px 80px rgba(0,0,0,0.55);

background: #2a3050;

}

#albumArt { width: 100%; height: 100%; object-fit: cover; display: block; }

.bottombar {

background: rgba(10, 14, 28, 0.55);

backdrop-filter: blur(20px);

border-top: 1px solid rgba(255,255,255,0.06);

padding: 10px 24px 14px;

}

.progress-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

.time-label { font-size: 11px; color: rgba(255,255,255,0.45); min-width: 34px; font-variant-numeric: tabular-nums; }

.time-label.right { text-align: right; }

.progress-bar { flex: 1; height: 3px; background: rgba(255,255,255,0.18); border-radius: 10px; cursor: pointer; }

.progress-fill { height: 100%; background: #fff; border-radius: 10px; width: 0%; transition: width 0.1s linear; pointer-events: none; }

.progress-bar:hover .progress-fill { background: #7eb8f7; }

.controls-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }

.track-meta { display: flex; align-items: center; gap: 12px; }

.meta-thumb { width: 42px; height: 42px; border-radius: 5px; object-fit: cover; background: #2a3050; flex-shrink: 0; }

.meta-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

.meta-sub { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 2px; }

.center-btns { display: flex; align-items: center; gap: 6px; }

.ctrl-btn {

background: none; border: none; color: rgba(255,255,255,0.65);

cursor: pointer; display: flex; align-items: center; justify-content: center;

padding: 8px; border-radius: 50%; transition: color 0.15s, transform 0.1s;

}

.ctrl-btn:hover { color: #fff; transform: scale(1.1); }

.ctrl-btn:active { transform: scale(0.95); }

.ctrl-btn.play-btn {

width: 40px; height: 40px; background: rgba(255,255,255,0.95);

color: #1a1a2e !important; border-radius: 50%;

}

.ctrl-btn.play-btn:hover { background: #fff; transform: scale(1.05) !important; }

.right-controls { display: flex; align-items: center; justify-content: flex-end; }

.vol-wrap { display: flex; align-items: center; gap: 8px; }

input[type=range] {

-webkit-appearance: none; width: 90px; height: 3px;

background: rgba(255,255,255,0.22); border-radius: 10px; outline: none; cursor: pointer;

}

input[type=range]::-webkit-slider-thumb {

-webkit-appearance: none; width: 12px; height: 12px;

background: #fff; border-radius: 50%; cursor: pointer;

}

</style>

</head>

<body>

<span id="pageTitle">Music Player</span>

</div>

</div>

</div>

</div>

<div>

</div>

</svg>

</button>

</svg>

</button>

</svg>

</button>

</div>

</svg>

</svg>

</div>

// =============================================

// EDIT THESE TWO LINES — NOTHING ELSE NEEDED

// =============================================

const AUDIO_URL = "https://example.com/your-song.mp3";

const IMAGE_URL = "https://example.com/your-cover.jpg";

const ARTIST = "Artist Name"; // optional

const YEAR = "2025"; // optional

// =============================================

const audio = document.getElementById('audio');

let playing = false;

function getNameFromUrl(url) {

try {

const file = new URL(url).pathname.split('/').pop();

return decodeURIComponent(file)

.replace(/\.[^.]+$/, '')

.replace(/[-_]/g, ' ')

.replace(/\b\w/g, c => c.toUpperCase());

} catch {

return 'Unknown Track';

}

function init() {

const title = getNameFromUrl(AUDIO_URL);

const art = IMAGE_URL || 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><rect fill="%232a3050" width="400" height="400"/><text x="200" y="215" font-size="80" text-anchor="middle" fill="%23ffffff30">♪</text></svg>';

document.getElementById('albumArt').src = art;

document.getElementById('metaThumb').src = art;

document.getElementById('bgBlur').style.backgroundImage = `url(${art})`;

document.getElementById('metaTitle').textContent = title;

document.getElementById('metaSub').textContent = [ARTIST, YEAR].filter(Boolean).join(' • ');

document.getElementById('pageTitle').textContent = title;

audio.src = AUDIO_URL;

audio.volume = 0.8;

audio.load();

}

function togglePlay() {

if (audio.paused) { audio.play(); playing = true; }

else { audio.pause(); playing = false; }

updateIcon();

}

function updateIcon() {

document.getElementById('playIcon').innerHTML = playing

? '<rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>'

: '<polygon points="5,3 19,12 5,21"/>';

}

function skip(s) { audio.currentTime = Math.max(0, Math.min(audio.duration || 0, audio.currentTime + s)); }

function fmt(s) {

if (isNaN(s)) return '0:00';

return `${Math.floor(s/60)}:${String(Math.floor(s%60)).padStart(2,'0')}`;

}

audio.addEventListener('timeupdate', () => {

const pct = audio.duration ? (audio.currentTime / audio.duration) * 100 : 0;

document.getElementById('progressFill').style.width = pct + '%';

document.getElementById('curTime').textContent = fmt(audio.currentTime);

});

audio.addEventListener('loadedmetadata', () => {

document.getElementById('durTime').textContent = fmt(audio.duration);

});

audio.addEventListener('ended', () => { playing = false; updateIcon(); });

document.getElementById('progressBar').addEventListener('click', function(e) {

const pct = (e.clientX - this.getBoundingClientRect().left) / this.offsetWidth;

audio.currentTime = pct * (audio.duration || 0);

});

document.addEventListener('keydown', e => {

if (e.code === 'Space') { e.preventDefault(); togglePlay(); }

});

init();

</script>

</body>

</html>