Embed

<style>
  :root{
    --card-bg:#0f1115; --card-fg:#eef2f7; --muted:#a9b1bd; --accent:#00d1b2;
    --radius:16px; --shadow:0 8px 24px rgba(0,0,0,.25);
  }
  .s55-audio-grid{
    display:grid; gap:18px;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  }
  .s55-card{
    position:relative; aspect-ratio:1/1; border-radius:var(--radius);
    overflow:hidden; background:var(--card-bg); color:var(--card-fg); box-shadow:var(--shadow);
    display:flex; flex-direction:column; justify-content:flex-end;
  }
  .s55-art{
    position:absolute; inset:0; background-size:cover; background-position:center;
    filter:brightness(.75) saturate(1.05); transition:transform .4s ease;
  }
  .s55-card:hover .s55-art{ transform:scale(1.03); }
  .s55-overlay{
    position:relative; z-index:2; padding:14px;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.75) 100%);
  }
  .s55-title{ font:600 15px/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin:0 0 6px; }
  .s55-meta{ font:500 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--muted); margin-bottom:10px; }
  .s55-ctrl{
    display:flex; align-items:center; gap:10px;
  }
  .s55-btn{
    width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
    background:var(--accent); color:#071013; display:grid; place-items:center;
    box-shadow:0 6px 18px rgba(0,209,178,.35);
  }
  .s55-btn:focus-visible{ outline:2px solid white; outline-offset:2px; }
  .s55-progress{
    position:relative; flex:1; height:6px; border-radius:999px; background:rgba(255,255,255,.2); cursor:pointer;
  }
  .s55-bar{
    position:absolute; inset:0 100% 0 0; background:var(--accent); border-radius:inherit; transition:width .1s linear;
  }
  .s55-time{ font:600 11px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:#e6f7f3; min-width:50px; text-align:right; }
  .s55-hidden-audio{ display:none; }
  /* Optional label strip */
  .s55-tag{
    position:absolute; top:10px; left:10px; z-index:2;
    background:rgba(0,0,0,.55); color:#fff; padding:6px 10px; border-radius:999px; font:600 11px/1 system-ui; letter-spacing:.3px;
    backdrop-filter:saturate(140%) blur(2px);
  }
</style>

<div class="s55-audio-grid" id="s55Grid">
  
  <article class="s55-card" data-src="https://files.freemusicarchive.org/storage-freemusicarchive-org/tracks/kd9y8rXv7m2Vd8zJ3vJ0JQm2Q9Hk1w3y6wqj1JbL.mp3">
    <div class="s55-art" style="background-image:url('https://images.unsplash.com/photo-1519677100203-a0e668c92439?q=80&w=1200&auto=format&fit=crop');"></div>
    <span class="s55-tag">Showreel</span>
    <div class="s55-overlay">
      <h3 class="s55-title">Above & Beyond</h3>
      <div class="s55-meta">Promo • 0:00</div>
      <div class="s55-ctrl">
        <button class="s55-btn" aria-label="Play Above & Beyond" data-action="toggle">▶</button>
        <div class="s55-progress" aria-label="Seek" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
          <div class="s55-bar"></div>
        </div>
        <div class="s55-time">0:00</div>
      </div>
      <audio class="s55-hidden-audio" preload="none"></audio>
    </div>
  </article>

  
  <article class="s55-card" data-src="https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Scott_Holmes_Music/Corporate__Motivational_Music/Scott_Holmes_Music_-_Corporate_Uplifting.mp3">
    <div class="s55-art" style="background-image:url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=1200&auto=format&fit=crop');"></div>
    <span class="s55-tag">Corporate</span>
    <div class="s55-overlay">
      <h3 class="s55-title">Corporate Uplifting</h3>
      <div class="s55-meta">Brand Film • 0:00</div>
      <div class="s55-ctrl">
        <button class="s55-btn" aria-label="Play Corporate Uplifting" data-action="toggle">▶</button>
        <div class="s55-progress" aria-label="Seek" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
          <div class="s55-bar"></div>
        </div>
        <div class="s55-time">0:00</div>
      </div>
      <audio class="s55-hidden-audio" preload="none"></audio>
    </div>
  </article>

  
  <article class="s55-card" data-src="https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/Komiku/The_Girl_in_the_City/Komiku_-_12_-_Friends.mp3">
    <div class="s55-art" style="background-image:url('https://images.unsplash.com/photo-1515212794873-1b9b9a7f3a28?q=80&w=1200&auto=format&fit=crop');"></div>
    <span class="s55-tag">Lifestyle</span>
    <div class="s55-overlay">
      <h3 class="s55-title">Friends</h3>
      <div class="s55-meta">Lifestyle • 0:00</div>
      <div class="s55-ctrl">
        <button class="s55-btn" aria-label="Play Friends" data-action="toggle">▶</button>
        <div class="s55-progress" aria-label="Seek" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
          <div class="s55-bar"></div>
        </div>
        <div class="s55-time">0:00</div>
      </div>
      <audio class="s55-hidden-audio" preload="none"></audio>
    </div>
  </article>
</div>

<script>
(() => {
  const grid = document.getElementById('s55Grid');
  const fmt = s => {
    const m = Math.floor(s/60)|0, sec = Math.floor(s%60)|0;
    return `${m}:${sec.toString().padStart(2,'0')}`;
  };
  const pauseOthers = current => {
    document.querySelectorAll('.s55-card').forEach(card => {
      const a = card.querySelector('audio');
      const btn = card.querySelector('.s55-btn');
      if (card !== current && !a.paused){ a.pause(); btn.textContent = '▶'; btn.setAttribute('aria-label','Play'); }
    });
  };
  const initCard = card => {
    const audio = card.querySelector('audio');
    const src = card.dataset.src;
    const btn = card.querySelector('.s55-btn');
    const bar = card.querySelector('.s55-bar');
    const prog = card.querySelector('.s55-progress');
    const time = card.querySelector('.s55-time');
    const meta = card.querySelector('.s55-meta');

    let durKnown = false;
    const load = () => { if (!audio.src) audio.src = src; };
    const update = () => {
      if (audio.duration && !isNaN(audio.duration)) {
        if(!durKnown){ meta.textContent = meta.textContent.replace(/\d+:\d+$/,'') + fmt(audio.duration); durKnown = true; }
        const pct = (audio.currentTime / audio.duration) * 100;
        bar.style.inset = `0 ${Math.max(0,100-pct)}% 0 0`;
        prog.setAttribute('aria-valuenow', Math.round(pct));
        time.textContent = fmt(audio.currentTime);
      }
    };

    btn.addEventListener('click', () => {
      load(); pauseOthers(card);
      if (audio.paused){ audio.play(); btn.textContent='⏸'; btn.setAttribute('aria-label','Pause'); }
      else{ audio.pause(); btn.textContent='▶'; btn.setAttribute('aria-label','Play'); }
    });

    audio.addEventListener('timeupdate', update);
    audio.addEventListener('loadedmetadata', update);
    audio.addEventListener('ended', () => { btn.textContent='▶'; time.textContent='0:00'; bar.style.inset='0 100% 0 0'; });

    // Click/keyboard seek
    const seekTo = clientX => {
      const rect = prog.getBoundingClientRect();
      const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
      if (!audio.src) load();
      if (audio.duration){ audio.currentTime = ratio * audio.duration; update(); }
    };
    prog.addEventListener('click', e => seekTo(e.clientX));
    prog.addEventListener('keydown', e => {
      if (e.key === 'ArrowRight' || e.key === 'ArrowLeft'){
        e.preventDefault();
        const delta = (e.key === 'ArrowRight' ? 5 : -5);
        if (!audio.src) load();
        if (audio.duration){ audio.currentTime = Math.min(Math.max(0, audio.currentTime + delta), audio.duration); update(); }
      } else if (e.key === 'Enter' || e.key === ' '){
        btn.click();
      }
    });
  };

  document.querySelectorAll('.s55-card').forEach(initCard);
})();
</script>

Image

Video editing timeline showcasing audio and visual elements from a creative project

<style>
  :root{
    --card-bg:#0f1115; --card-fg:#eef2f7; --muted:#a9b1bd; --accent:#00d1b2;
    --radius:16px; --shadow:0 8px 24px rgba(0,0,0,.25);
  }
  .s55-wrap{ max-width:1200px; margin:0 auto; padding:16px; }
  .s55-audio-grid{
    display:grid; gap:18px;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  }
  @media (min-width: 1024px){
    .s55-audio-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  }
  .s55-card{
    position:relative; aspect-ratio:1/1; border-radius:var(--radius);
    overflow:hidden; background:var(--card-bg); color:var(--card-fg); box-shadow:var(--shadow);
    display:flex; flex-direction:column; justify-content:flex-end;
  }
  .s55-art{
    position:absolute; inset:0; background-size:cover; background-position:center;
    filter:brightness(.75) saturate(1.05); transition:transform .4s ease;
  }
  .s55-card:hover .s55-art{ transform:scale(1.03); }
  .s55-overlay{
    position:relative; z-index:2; padding:14px;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.75) 100%);
  }
  .s55-title{ font:600 15px/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin:0 0 6px; }
  .s55-meta{ font:500 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--muted); margin-bottom:10px; }
  .s55-ctrl{ display:flex; align-items:center; gap:10px; }
  .s55-btn{
    width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
    background:var(--accent); color:#071013; display:grid; place-items:center;
    box-shadow:0 6px 18px rgba(0,209,178,.35);
  }
  .s55-btn:focus-visible{ outline:2px solid white; outline-offset:2px; }
  .s55-progress{
    position:relative; flex:1; height:6px; border-radius:999px; background:rgba(255,255,255,.2); cursor:pointer;
  }
  .s55-bar{ position:absolute; inset:0 100% 0 0; background:var(--accent); border-radius:inherit; transition:width .1s linear; }
  .s55-time{ font:600 11px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:#e6f7f3; min-width:50px; text-align:right; }
  .s55-hidden-audio{ display:none; }
  .s55-tag{
    position:absolute; top:10px; left:10px; z-index:2;
    background:rgba(0,0,0,.55); color:#fff; padding:6px 10px; border-radius:999px; font:600 11px/1 system-ui; letter-spacing:.3px;
    backdrop-filter:saturate(140%) blur(2px);
  }
</style>

<div class="s55-wrap">
  <div class="s55-audio-grid" id="s55Grid"></div>
</div>

<script>
(() => {
  const MP3 = "https://cdn.commoninja.com/asset/e695c595-fef1-4898-8e72-b3434e4ecb64.mp3";

  // 16 demo cards — titles & tags rotate; images pulled from Unsplash keywords
  const items = Array.from({length:16}, (_,i) => {
    const n = (i+1).toString().padStart(2,'0');
    const tags = ["Showreel","Corporate","Lifestyle","Chill","Promo","Ambient","Tech","Brand"];
    const tag = tags[i % tags.length];
    const keywords = ["city","workspace","night","abstract","ocean","studio","neon","aerial"];
    const kw = keywords[i % keywords.length];
    const art = `https://images.unsplash.com/photo-1500${(2000+i*3)}-000000000000?q=80&w=1200&auto=format&fit=crop&ixlib=rb-4.0.3&sat=10&blend=000000&blend-mode=normal`;
    return { title:`Track ${n}`, tag, art, src:MP3 };
  });

  const grid = document.getElementById('s55Grid');

  const fmt = s => {
    const m = Math.floor(s/60)|0, sec = Math.floor(s%60)|0;
    return `${m}:${sec.toString().padStart(2,'0')}`;
  };
  const pauseOthers = current => {
    document.querySelectorAll('.s55-card').forEach(card => {
      const a = card.querySelector('audio');
      const btn = card.querySelector('.s55-btn');
      if (card !== current && !a.paused){ a.pause(); btn.textContent = '▶'; btn.setAttribute('aria-label','Play'); }
    });
  };

  const cardHTML = ({title, tag, art, src}) => `
    <article class="s55-card" data-src="${src}">
      <div class="s55-art" style="background-image:url('${art}');"></div>
      <span class="s55-tag">${tag}</span>
      <div class="s55-overlay">
        <h3 class="s55-title">${title}</h3>
        <div class="s55-meta">${tag} • 0:00</div>
        <div class="s55-ctrl">
          <button class="s55-btn" aria-label="Play ${title}" data-action="toggle">▶</button>
          <div class="s55-progress" aria-label="Seek" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
            <div class="s55-bar"></div>
          </div>
          <div class="s55-time">0:00</div>
        </div>
        <audio class="s55-hidden-audio" preload="none"></audio>
      </div>
    </article>
  `;

  grid.innerHTML = items.map(cardHTML).join("");

  // Wire up behaviors
  const initCard = card => {
    const audio = card.querySelector('audio');
    const src = card.dataset.src;
    const btn = card.querySelector('.s55-btn');
    const bar = card.querySelector('.s55-bar');
    const prog = card.querySelector('.s55-progress');
    const time = card.querySelector('.s55-time');
    const meta = card.querySelector('.s55-meta');

    let durKnown = false;
    const load = () => { if (!audio.src) audio.src = src; };
    const update = () => {
      if (audio.duration && !isNaN(audio.duration)) {
        if(!durKnown){ meta.textContent = meta.textContent.replace(/\d+:\d+$/,'') + fmt(audio.duration); durKnown = true; }
        const pct = (audio.currentTime / audio.duration) * 100;
        bar.style.inset = `0 ${Math.max(0,100-pct)}% 0 0`;
        prog.setAttribute('aria-valuenow', Math.round(pct));
        time.textContent = fmt(audio.currentTime);
      }
    };

    btn.addEventListener('click', () => {
      load(); pauseOthers(card);
      if (audio.paused){ audio.play(); btn.textContent='⏸'; btn.setAttribute('aria-label','Pause'); }
      else{ audio.pause(); btn.textContent='▶'; btn.setAttribute('aria-label','Play'); }
    });

    audio.addEventListener('timeupdate', update);
    audio.addEventListener('loadedmetadata', update);
    audio.addEventListener('ended', () => { btn.textContent='▶'; time.textContent='0:00'; bar.style.inset='0 100% 0 0'; });

    const seekTo = clientX => {
      const rect = prog.getBoundingClientRect();
      const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
      if (!audio.src) load();
      if (audio.duration){ audio.currentTime = ratio * audio.duration; update(); }
    };
    prog.addEventListener('click', e => seekTo(e.clientX));
    prog.addEventListener('keydown', e => {
      if (e.key === 'ArrowRight' || e.key === 'ArrowLeft'){
        e.preventDefault();
        const delta = (e.key === 'ArrowRight' ? 5 : -5);
        if (!audio.src) load();
        if (audio.duration){ audio.currentTime = Math.min(Math.max(0, audio.currentTime + delta), audio.duration); update(); }
      } else if (e.key === 'Enter' || e.key === ' '){
        btn.click();
      }
    });
  };

  document.querySelectorAll('.s55-card').forEach(initCard);
})();
</script>