Music Player – Spotify Clone with Playlist & Visualizer

67 0 codex Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Music Player – Spotify Clone with Playlist & Visualizer

<div class="app">
  <aside class="lib">
    <div class="brand">🎵 Soundwave</div>
    <p class="lbl">Playlist</p>
    <ul id="list"></ul>
    <label class="upload">➕ Add your own MP3<input type="file" id="file" accept="audio/*" multiple hidden></label>
  </aside>
  <main class="now">
    <div class="art" id="art"><div class="disc"></div></div>
    <canvas id="viz" width="600" height="90"></canvas>
    <h1 id="title">—</h1>
    <p id="artist">—</p>
    <div class="seek"><span id="cur">0:00</span><input type="range" id="pos" min="0" max="100" value="0" step="0.1"><span id="dur">0:00</span></div>
    <div class="ctrl">
      <button id="shuffle" title="Shuffle">🔀</button>
      <button id="prev" title="Previous">⏮</button>
      <button id="play" class="big" title="Play">▶</button>
      <button id="next" title="Next">⏭</button>
      <button id="repeat" title="Repeat">🔁</button>
    </div>
    <div class="vol">🔈<input type="range" id="vol" min="0" max="1" step="0.01" value="0.7">🔊</div>
  </main>
</div>

CSS

* { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100vh; background: #121212; color: #fff; font-family: "Segoe UI", system-ui, sans-serif; }
.app { display: grid; grid-template-columns: 300px 1fr; min-height: 100vh; }
.lib { background: #000; padding: 24px 16px; overflow-y: auto; }
.brand { font-size: 1.4rem; font-weight: 800; color: #1ed760; margin-bottom: 26px; }
.lbl { color: #b3b3b3; font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
#list { list-style: none; }
#list li { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 8px; cursor: pointer; }
#list li:hover { background: #1a1a1a; } #list li.on { background: #232323; }
#list li.on b { color: #1ed760; }
#list .c { width: 44px; height: 44px; border-radius: 6px; flex-shrink: 0; display: grid; place-items: center; font-size: 1.3rem; }
#list small { display: block; color: #b3b3b3; }
#list .d { margin-left: auto; color: #b3b3b3; font-size: .8rem; }
.upload { display: block; margin-top: 18px; padding: 12px; text-align: center; border: 1px dashed #444; border-radius: 10px; color: #b3b3b3; cursor: pointer; }
.upload:hover { color: #fff; border-color: #1ed760; }
.now { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; gap: 10px; background: linear-gradient(180deg, var(--c, #2a5298) 0%, #121212 70%); transition: background .6s; }
.art { width: min(300px, 70vw); aspect-ratio: 1; border-radius: 50%; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.disc { position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle, #111 0 2px, #1b1b1b 2px 4px); display: grid; place-items: center; animation: spin 6s linear infinite; animation-play-state: paused; }
.disc::after { content: attr(data-e); width: 42%; height: 42%; border-radius: 50%; background: var(--c, #2a5298); display: grid; place-items: center; font-size: 3rem; border: 4px solid #000; }
.playing .disc { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }
#viz { width: min(500px, 90%); height: 70px; }
h1 { font-size: clamp(1.4rem, 4vw, 2rem); text-align: center; }
#artist { color: #b3b3b3; }
.seek { display: flex; align-items: center; gap: 10px; width: min(520px, 100%); font-size: .8rem; color: #b3b3b3; }
.seek input { flex: 1; }
input[type=range] { accent-color: #1ed760; cursor: pointer; }
.ctrl { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.ctrl button { border: 0; background: none; color: #fff; font-size: 1.4rem; cursor: pointer; opacity: .85; width: 44px; height: 44px; border-radius: 50%; }
.ctrl button:hover { opacity: 1; transform: scale(1.08); }
.ctrl button.act { color: #1ed760; background: rgba(30,215,96,.15); }
.ctrl .big { width: 64px; height: 64px; background: #fff; color: #000; font-size: 1.5rem; opacity: 1; }
.vol { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
@media (max-width: 760px) { .app { grid-template-columns: 1fr; } .lib { order: 2; } }

// Soundwave music player (Spotify-style): playlist, play/pause, seek, next/prev, shuffle, repeat, volume, visualizer.
// Demo tracks are composed live with Web Audio; add your own MP3 files with the upload button.
var ac, master, analyser, ctxV = document.getElementById('viz').getContext('2d');
var TRACKS = [
  { t: 'Sunset Drive', a: 'Neon Avenue', e: '🌅', c: '#c2410c', bpm: 100, notes: [57, 60, 64, 67, 64, 60, 62, 65], len: 48 },
  { t: 'Lo-fi Rain', a: 'Cloud Study', e: '🌧️', c: '#1e40af', bpm: 76, notes: [60, 63, 67, 70, 68, 65, 63, 58], len: 52 },
  { t: 'Arcade Hero', a: 'Pixel Band', e: '👾', c: '#7c3aed', bpm: 140, notes: [72, 76, 79, 84, 79, 76, 74, 71], len: 40 },
  { t: 'Ocean Breeze', a: 'Blue Lagoon', e: '🌊', c: '#0e7490', bpm: 88, notes: [62, 66, 69, 73, 71, 69, 66, 64], len: 50 },
  { t: 'Desert Night', a: 'Sahara Keys', e: '🏜️', c: '#a16207', bpm: 92, notes: [57, 58, 61, 62, 64, 65, 68, 69], len: 46 }
];
var idx = 0, playing = false, startAt = 0, offset = 0, nodes = [], audioEl = null, shuffle = false, repeat = false, raf;
function initAudio() {
  if (ac) return;
  ac = new (window.AudioContext || window.webkitAudioContext)();
  master = ac.createGain(); master.gain.value = +document.getElementById('vol').value;
  analyser = ac.createAnalyser(); analyser.fftSize = 128;
  master.connect(analyser); analyser.connect(ac.destination);
}
function fmt(s) { s = Math.max(0, s | 0); return (s / 60 | 0) + ':' + ('0' + s % 60).slice(-2); }
function freq(m) { return 440 * Math.pow(2, (m - 69) / 12); }
function schedule(tr, from) { // build a little song: bass + arpeggio + hats
  var beat = 60 / tr.bpm, t0 = ac.currentTime - from;
  for (var b = Math.ceil(from / beat * 2) ; b * beat / 2 < tr.len; b++) {
    var t = t0 + b * beat / 2; if (t > ac.currentTime + 60) break;
    var bar = Math.floor(b / 8), n = tr.notes[(b + bar * 3) % tr.notes.length];
    note('triangle', freq(n), t, beat * .45, .12);
    if (b % 4 === 0) note('sine', freq(tr.notes[bar % 4] - 24), t, beat * 1.8, .25);
    if (b % 2 === 1) hat(t);
  }
}
function note(type, f, t, d, v) {
  var o = ac.createOscillator(), g = ac.createGain(); o.type = type; o.frequency.value = f;
  g.gain.setValueAtTime(0, t); g.gain.linearRampToValueAtTime(v, t + .02); g.gain.exponentialRampToValueAtTime(.001, t + d);
  o.connect(g).connect(master); o.start(t); o.stop(t + d + .05); nodes.push(o);
}
function hat(t) {
  var b = ac.createBuffer(1, 2000, ac.sampleRate), d = b.getChannelData(0); for (var i = 0; i < 2000; i++) d[i] = Math.random() * 2 - 1;
  var s = ac.createBufferSource(), f = ac.createBiquadFilter(), g = ac.createGain(); s.buffer = b; f.type = 'highpass'; f.frequency.value = 8000; g.gain.value = .05;
  s.connect(f).connect(g).connect(master); s.start(t); nodes.push(s);
}
function stopNodes() { nodes.forEach(function (n) { try { n.stop(); } catch (e) {} }); nodes = []; if (audioEl) audioEl.pause(); }
function tr() { return TRACKS[idx]; }
function pos() { var t = tr(); if (t.url) return audioEl ? audioEl.currentTime : 0; return playing ? ac.currentTime - startAt : offset; }
function dur() { var t = tr(); return t.url ? (audioEl && audioEl.duration) || 0 : t.len; }
function play() {
  initAudio(); if (ac.state === 'suspended') ac.resume();
  stopNodes(); var t = tr();
  if (t.url) {
    if (!audioEl || audioEl.src !== t.url) { audioEl = new Audio(t.url); var src = ac.createMediaElementSource(audioEl); src.connect(master); audioEl.onended = ended; }
    audioEl.currentTime = offset; audioEl.play();
  } else { startAt = ac.currentTime - offset; schedule(t, offset); }
  playing = true; ui();
}
function pause() { offset = pos(); stopNodes(); playing = false; ui(); }
function load(i, autoplay) { stopNodes(); idx = (i + TRACKS.length) % TRACKS.length; offset = 0; playing = false; audioEl = null; ui(); if (autoplay) play(); }
function ended() { if (repeat) load(idx, true); else next(); }
function next() { load(shuffle ? Math.floor(Math.random() * TRACKS.length) : idx + 1, true); }
function ui() {
  var t = tr();
  document.getElementById('title').textContent = t.t; document.getElementById('artist').textContent = t.a;
  document.querySelector('.disc').dataset.e = t.e;
  document.querySelector('.now').style.setProperty('--c', t.c); document.querySelector('.art').style.setProperty('--c', t.c);
  document.getElementById('play').textContent = playing ? '⏸' : '▶';
  document.querySelector('.now').classList.toggle('playing', playing);
  document.getElementById('list').innerHTML = TRACKS.map(function (x, i) {
    return '<li data-i="' + i + '" class="' + (i === idx ? 'on' : '') + '"><span class="c" style="background:' + x.c + '">' + x.e + '</span><div><b>' + x.t + '</b><small>' + x.a + '</small></div><span class="d">' + (x.len ? fmt(x.len) : '') + '</span></li>';
  }).join('');
}
document.getElementById('list').onclick = function (e) { var li = e.target.closest('li'); if (li) load(+li.dataset.i, true); };
document.getElementById('play').onclick = function () { playing ? pause() : play(); };
document.getElementById('next').onclick = next;
document.getElementById('prev').onclick = function () { if (pos() > 3) load(idx, playing); else load(idx - 1, true); };
document.getElementById('shuffle').onclick = function () { shuffle = !shuffle; this.classList.toggle('act', shuffle); };
document.getElementById('repeat').onclick = function () { repeat = !repeat; this.classList.toggle('act', repeat); };
document.getElementById('vol').oninput = function () { if (master) master.gain.value = +this.value; };
var seek = document.getElementById('pos'), seeking = false;
seek.oninput = function () { seeking = true; document.getElementById('cur').textContent = fmt(seek.value / 100 * dur()); };
seek.onchange = function () { seeking = false; offset = seek.value / 100 * dur(); if (playing) play(); };
document.getElementById('file').onchange = function () {
  Array.prototype.forEach.call(this.files, function (f) { TRACKS.push({ t: f.name.replace(/\.[^.]+$/, ''), a: 'Your music', e: '🎶', c: '#15803d', url: URL.createObjectURL(f), len: 0 }); });
  load(TRACKS.length - 1, true);
};
addEventListener('keydown', function (e) { if (e.code === 'Space' && e.target.tagName !== 'INPUT') { e.preventDefault(); playing ? pause() : play(); } });
(function loop() {
  var p = pos(), d = dur();
  if (playing && !tr().url && p >= d) ended();
  if (!seeking) { seek.value = d ? p / d * 100 : 0; document.getElementById('cur').textContent = fmt(p); }
  document.getElementById('dur').textContent = fmt(d);
  var c = ctxV, W = c.canvas.width, H = c.canvas.height; c.clearRect(0, 0, W, H);
  var data = new Uint8Array(64); if (analyser) analyser.getByteFrequencyData(data);
  for (var i = 0; i < 48; i++) { var v = (data[i] || 0) / 255, h = Math.max(3, v * H); c.fillStyle = 'rgba(30,215,96,' + (.35 + v * .65) + ')'; c.fillRect(i * W / 48 + 2, H - h, W / 48 - 4, h); }
  requestAnimationFrame(loop);
})();
ui();

Comments 0

…

Music Player – Spotify Clone with Playlist & Visualizer

Recommended

Comments 0