Banner

Social Media Audio 

Luxury of light yellow and golden smooth blurred gradient background has a little abstract light. modern of sunlight shadow backdrop for graphic design, Empty wallpaper template for products

Audio player

Young group of people using mobile phones together at city street.

Embed

<style>
  .s55pl[data-theme="dark"]{--bg:#16181d;--panel:#1a1e25;--panel-2:#1c2027;--border:#262a31;--text:#e9edf1;--muted:#aab2bd;--chip:#c8ced8;--surface:#0b0d11;--bar:#394150;--green:#44d17a;--accent:#ff2d55}
  .s55pl[data-theme="light"]{--bg:#f5f7fb;--panel:#fff;--panel-2:#f5f7fb;--border:#dbe0e8;--text:#0b1220;--muted:#536072;--chip:#3c4756;--surface:#eef2f8;--bar:#c6d0df;--green:#1fa971;--accent:#ff2d55}
  .s55pl-mini[data-theme="dark"]{--bg:#16181d;--panel:#1a1e25;--panel-2:#1c2027;--border:#262a31;--text:#e9edf1;--muted:#aab2bd;--chip:#c8ced8;--surface:#0b0d11;--bar:#394150;--green:#44d17a;--accent:#ff2d55}
  .s55pl-mini[data-theme="light"]{--bg:#f5f7fb;--panel:#fff;--panel-2:#f5f7fb;--border:#dbe0e8;--text:#0b1220;--muted:#536072;--chip:#3c4756;--surface:#eef2f8;--bar:#c6d0df;--green:#1fa971;--accent:#ff2d55}

  .s55pl{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:14px;width:min(100%,900px);margin:0 auto;box-sizing:border-box}
  .s55pl h2{margin:0 0 10px;color:var(--text);font:600 18px/1.2 system-ui}
  .s55pl-cover{width:100%;height:300px;border-radius:12px;object-fit:cover;display:block;margin-bottom:10px}
  .s55pl-controls{display:grid;grid-template-columns:176px minmax(0,1fr) 300px;gap:12px;align-items:center;margin-bottom:8px}
  .s55pl-btns{display:flex;gap:8px}
  .s55pl-btn{height:40px;width:40px;border-radius:999px;border:0;background:var(--accent);color:#fff;font-size:18px;cursor:pointer}
  .s55pl-btn.secondary{background:var(--panel-2);border:1px solid var(--border);color:var(--text)}
  .s55pl-title{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .s55pl-right{display:flex;align-items:center;justify-content:flex-end;gap:8px}
  .s55pl-time{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px;min-width:90px;text-align:right}
  .s55pl-mute{height:28px;width:28px;border-radius:999px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer}
  .s55pl-vol{accent-color:var(--green);width:120px;max-width:160px}
  .s55pl-theme{height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--border);background:var(--panel-2);color:var(--text)}

  .s55pl-wavebox{position:relative;height:64px;border-radius:10px;background:var(--surface);overflow:hidden;margin:8px 0 12px}
  .s55pl-bars,.s55pl-bars--prog{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px;padding:0;box-sizing:border-box;pointer-events:none}
  .s55pl-bars i{display:block;width:2px;background:var(--bar);border-radius:1px}
  .s55pl-bars--prog{transform-origin:left center;transform:scaleX(0);will-change:transform;z-index:2}
  .s55pl-bars--prog i{background:var(--green)}
  .s55pl-cursor{position:absolute;top:0;bottom:0;width:2px;background:var(--green);opacity:.9;pointer-events:none;z-index:3}
  .s55pl-wavebox[data-seekable="1"]{cursor:pointer}

  .s55pl-err{color:#ff3b57;font-size:12px;margin:4px 0;min-height:16px}
  .s55pl-list{display:flex;flex-direction:column;gap:6px}
  .s55pl-item{display:grid;grid-template-columns:28px 1fr 280px 90px;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text);cursor:pointer}
  .s55pl-item:hover{background:color-mix(in oklab,var(--panel) 90%, var(--text) 10%)}
  .s55pl-item.active{box-shadow:inset 0 0 0 2px var(--accent)}
  .s55pl-idx{color:var(--muted);text-align:center}
  .s55pl-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .s55pl-rowwave{position:relative;height:28px;border-radius:6px;background:var(--surface);overflow:hidden}
  .s55pl-rowbars,.s55pl-rowbars--prog{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px;padding:0;box-sizing:border-box;pointer-events:none}
  .s55pl-rowbars i{display:block;width:2px;background:var(--bar);border-radius:1px}
  .s55pl-rowbars--prog{transform-origin:left center;transform:scaleX(0);will-change:transform;z-index:2}
  .s55pl-rowcursor{position:absolute;top:0;bottom:0;width:2px;background:var(--green);opacity:.9;pointer-events:none;z-index:3}
  .s55pl-badge{justify-self:end;color:var(--chip);background:var(--panel-2);border:1px solid var(--border);border-radius:999px;font-size:11px;padding:3px 8px}
  @media (max-width:760px){.s55pl-item{grid-template-columns:28px 1fr 60px}.s55pl-rowwave{display:none}}
  @media (max-width:600px){.s55pl-controls{grid-template-columns:160px minmax(0,1fr) 200px}.s55pl-vol{width:90px}.s55pl-cover{height:200px}}

  .s55pl-mini[hidden]{display:none!important}
  .s55pl-mini{position:fixed;left:env(safe-area-inset-left,0);right:env(safe-area-inset-right,0);bottom:0;z-index:99999;display:flex;align-items:center;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0));background:var(--panel);border-top:1px solid var(--border);box-shadow:0 -8px 24px rgba(0,0,0,.35)}
  .s55pl-mini .s55pl-btn{height:36px;width:36px}
  .s55pl-mini-wave{position:relative;height:36px;flex:1;border-radius:8px;background:var(--surface);overflow:hidden}
  .s55pl-mini-bars,.s55pl-mini-bars--prog{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px;padding:0;box-sizing:border-box;pointer-events:none}
  .s55pl-mini-bars i{display:block;width:2px;background:var(--bar);border-radius:1px}
  .s55pl-mini-bars--prog{transform-origin:left center;transform:scaleX(0);will-change:transform;z-index:2}
  .s55pl-mini-cursor{position:absolute;top:0;bottom:0;width:2px;background:var(--green);opacity:.9;pointer-events:none;z-index:3}
  .s55pl-mini-title{color:var(--text);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
  body.s55pl--mini-open{padding-bottom:calc(76px + env(safe-area-inset-bottom,0))}
</style>

<div class="s55pl" id="s55pl-social" tabindex="0" data-theme="dark">
  <h2>SOCIAL MEDIA — Studio 55</h2>
  <img class="s55pl-cover"
       src="https://cdn.commoninja.com/asset/995e5c72-ed3a-4a68-b8ee-8276ffa54a72.png"
       alt="Social Media cover" loading="lazy"/>

  <div class="s55pl-controls">
    <div class="s55pl-btns">
      <button class="s55pl-btn secondary" data-action="prev" aria-label="Previous">⏮</button>
      <button class="s55pl-btn" data-action="play" aria-label="Play/Pause">▶</button>
      <button class="s55pl-btn secondary" data-action="next" aria-label="Next">⏭</button>
    </div>
    <div class="s55pl-title" data-role="title">Loading…</div>
    <div class="s55pl-right">
      <div class="s55pl-time" data-role="time">00:00 / 00:00</div>
      <button class="s55pl-mute" data-action="mute" aria-label="Mute/Unmute">🔇</button>
      <input class="s55pl-vol" type="range" min="0" max="1" step="0.01" value="0.8" aria-label="Volume"/>
      <button class="s55pl-theme" id="s55pl-theme-social" aria-label="Toggle theme">🌙 Dark</button>
    </div>
  </div>

  <div class="s55pl-wavebox" id="s55pl-wavebox-social" data-seekable="1" title="Click to seek">
    <div class="s55pl-bars" id="s55pl-bars-social"></div>
    <div class="s55pl-bars s55pl-bars--prog" id="s55pl-bars-prog-social"></div>
    <i class="s55pl-cursor" id="s55pl-cursor-social"></i>
  </div>

  <div class="s55pl-err" id="s55pl-err-social"></div>
  <div class="s55pl-list" id="s55pl-list-social"></div>
</div>

<div class="s55pl-mini" id="s55pl-mini-social" hidden data-theme="dark">
  <button class="s55pl-btn" id="mini-play-social" aria-label="Play/Pause">▶</button>
  <div class="s55pl-mini-wave" id="mini-wave-social" title="Tap to seek">
    <div class="s55pl-mini-bars" id="mini-bg-social"></div>
    <div class="s55pl-mini-bars s55pl-mini-bars--prog" id="mini-fg-social"></div>
    <i class="s55pl-mini-cursor" id="mini-cur-social"></i>
  </div>
  <div class="s55pl-mini-title" id="mini-title-social">—</div>
</div>

<script>
(function(){
  const PLAYLIST = [
    { title:'Sun Goes Down',  artist:'Studio 55', file:'https://cdn.commoninja.com/asset/8e9a5acf-4926-4d13-81ad-7507a0c961bd.mp3' },
    { title:'Arbor Street',   artist:'Studio 55', file:'https://cdn.commoninja.com/asset/c96e81ee-e866-4ab0-9052-8900110d7481.mp3' },
    { title:'Digital Dream',  artist:'Studio 55', file:'https://cdn.commoninja.com/asset/e695c595-fef1-4898-8e72-b3434e4ecb64.mp3' },
    { title:"It's True",      artist:'Studio 55', file:'https://cdn.commoninja.com/asset/433bc128-52ab-4aa0-a218-64208410d6d4.mp3' },
    { title:'Why Me',         artist:'Studio 55', file:'https://cdn.commoninja.com/asset/e695c595-fef1-4898-8e72-b3434e4ecb64.mp3' },
    { title:'One Take',       artist:'Studio 55', file:'https://cdn.commoninja.com/asset/e915a1fd-5ebb-4e5c-802c-dcb37a8928e9.mp3' },
    { title:'Like You',       artist:'Studio 55', file:'https://cdn.commoninja.com/asset/70448994-9737-4f70-a9af-9ca1c0ce95b4.mp3' },
    { title:'Slo Mo',         artist:'Studio 55', file:'https://cdn.commoninja.com/asset/70448994-9737-4f70-a9af-9ca1c0ce95b4.mp3' },
    { title:'Inside My Mind', artist:'Studio 55', file:'https://cdn.commoninja.com/asset/70448994-9737-4f70-a9af-9ca1c0ce95b4.mp3' },
    { title:'Walked Alone',   artist:'Studio 55', file:'https://cdn.commoninja.com/asset/70448994-9737-4f70-a9af-9ca1c0ce95b4.mp3' },
    { title:'Friendly Heart', artist:'Studio 55', file:'https://cdn.commoninja.com/asset/70448994-9737-4f70-a9af-9ca1c0ce95b4.mp3' },
  ];

  const fmt=s=>(!isFinite(s)||s<0)?'00:00':String(Math.floor(s/60)).padStart(2,'0')+':'+String(Math.floor(s%60)).padStart(2,'0');
  const clamp=(v,min,max)=>Math.min(max,Math.max(min,v));

  const root=document.getElementById('s55pl-social');
  const listEl=document.getElementById('s55pl-list-social');
  const errEl=document.getElementById('s55pl-err-social');
  const titleEl=root.querySelector('[data-role="title"]');
  const timeEl=root.querySelector('[data-role="time"]');
  const playBtn=root.querySelector('[data-action="play"]');
  const prevBtn=root.querySelector('[data-action="prev"]');
  const nextBtn=root.querySelector('[data-action="next"]');
  const muteBtn=root.querySelector('[data-action="mute"]');
  const volEl=root.querySelector('.s55pl-vol');
  const themeBtn=document.getElementById('s55pl-theme-social');

  const waveBox=document.getElementById('s55pl-wavebox-social');
  const barsBG=document.getElementById('s55pl-bars-social');
  const barsFG=document.getElementById('s55pl-bars-prog-social');
  const bigCur=document.getElementById('s55pl-cursor-social');

  const mini=document.getElementById('s55pl-mini-social');
  const miniPlay=document.getElementById('mini-play-social');
  const miniWave=document.getElementById('mini-wave-social');
  const miniBg=document.getElementById('mini-bg-social');
  const miniFg=document.getElementById('mini-fg-social');
  const miniCur=document.getElementById('mini-cur-social');
  const miniTitle=document.getElementById('mini-title-social');
  if (mini && mini.parentElement!==document.body) document.body.appendChild(mini);

  const media=new Audio(); media.preload='metadata'; media.volume=parseFloat(volEl.value||'0.8');

  function seedInt(str){let h=0; for(let i=0;i<str.length;i++){h=(h<<5)-h+str.charCodeAt(i);h|=0;} return Math.abs(h);}
  function prng(n){return()=>{n=(n*16807)%2147483647;return(n-1)/2147483646;};}
  const BAR_W=2,BAR_G=2;
  function barCount(el){return Math.max(40,Math.floor((el.clientWidth||0)/(BAR_W+BAR_G)));}
  function buildBars(container,count,seed){container.innerHTML='';container.style.gap=BAR_G+'px';const r=prng(seed);for(let i=0;i<count;i++){const v=Math.pow(r(),0.6);const h=Math.max(.12,Math.min(.98,v))*100;const b=document.createElement('i');b.style.height=h+'%';b.style.width=BAR_W+'px';container.appendChild(b);}}

  function isMobile(){return window.matchMedia('(max-width: 760px)').matches||/Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);}
  function showMini(){if(!isMobile())return;if(mini.hidden){mini.hidden=false;document.body.classList.add('s55pl--mini-open');requestAnimationFrame(()=>{renderMini(idx);paintMini(PROG[idx]||0);});}}

  let idx=0,duration=0; const PROG=new Array(PLAYLIST.length).fill(0);
  const rowBox=[],rowBG=[],rowFG=[],rowCur=[];
  listEl.innerHTML='';
  PLAYLIST.forEach((t,i)=>{
    const row=document.createElement('div'); row.className='s55pl-item'; row.dataset.idx=i;
    row.innerHTML=`<div class="s55pl-idx">${i+1}</div>
      <div class="s55pl-name">${t.title}</div>
      <div class="s55pl-rowwave" title="Click to play/seek">
        <div class="s55pl-rowbars"></div>
        <div class="s55pl-rowbars s55pl-rowbars--prog"></div>
        <i class="s55pl-rowcursor"></i>
      </div>
      <div class="s55pl-badge">Social</div>`;
    listEl.appendChild(row);
    rowBox[i]=row.querySelector('.s55pl-rowwave'); rowBG[i]=row.querySelector('.s55pl-rowbars'); rowFG[i]=row.querySelector('.s55pl-rowbars--prog'); rowCur[i]=row.querySelector('.s55pl-rowcursor');

    row.addEventListener('click',e=>{ if(e.target.closest('.s55pl-rowwave'))return; const k=Number(row.dataset.idx); if(k===idx){media.paused?media.play().catch(()=>{}):media.pause();} else {setActive(k,true);} });
    rowBox[i].addEventListener('click',e=>{ const r=rowBox[i].getBoundingClientRect(); const p=clamp((e.clientX-r.left)/r.width,0,1); if(i!==idx){setActive(i,true);} if(isFinite(duration)&&duration>0){media.currentTime=duration*p;} else {PROG[i]=p; paintRow(i,p);} e.stopPropagation(); });
  });

  function renderBig(i){const key=PLAYLIST[i].title+PLAYLIST[i].file,seed=seedInt(key); buildBars(barsBG,barCount(waveBox),seed); buildBars(barsFG,barsBG.childElementCount,seed);}
  function renderRow(i){const key=PLAYLIST[i].title+PLAYLIST[i].file,seed=seedInt(key); buildBars(rowBG[i],barCount(rowBox[i]),seed); buildBars(rowFG[i],rowBG[i].childElementCount,seed);}
  function renderAllRows(){for(let i=0;i<PLAYLIST.length;i++){renderRow(i);paintRow(i,PROG[i]||0);}}
  function renderMini(i){const key=PLAYLIST[i].title+PLAYLIST[i].file,seed=seedInt(key); buildBars(miniBg,barCount(miniWave),seed); buildBars(miniFg,miniBg.childElementCount,seed);}

  function paintBig(p){const pp=clamp(p,0,1); barsFG.style.transform=`scaleX(${pp})`; bigCur.style.left=(pp*100)+'%';}
  function paintRow(i,p){const pp=clamp(p,0,1); if(!rowFG[i]||!rowCur[i])return; rowFG[i].style.transform=`scaleX(${pp})`; rowCur[i].style.left=(pp*100)+'%';}
  function paintMini(p){const pp=clamp(p,0,1); miniFg.style.transform=`scaleX(${pp})`; miniCur.style.left=(pp*100)+'%';}
  function paintActive(p){paintBig(p);paintRow(idx,p);paintMini(p);}

  function setActive(i,playNow=false){
    if(isFinite(duration)&&duration>0) PROG[idx]=(media.currentTime||0)/duration;
    idx=(i+PLAYLIST.length)%PLAYLIST.length; const tr=PLAYLIST[idx]; errEl.textContent='';
    titleEl.textContent=tr.title+(tr.artist?(' — '+tr.artist):''); miniTitle.textContent=tr.title;
    [...listEl.children].forEach(el=>el.classList.toggle('active',Number(el.dataset.idx)===idx));
    media.src=tr.file; media.load();
    renderBig(idx); renderRow(idx); renderMini(idx); paintActive(PROG[idx]||0);
    if(playNow){ const p=media.play(); if(p&&p.catch)p.catch(()=>{}); showMini(); }
  }

  playBtn.addEventListener('click',()=>{media.paused?media.play():media.pause();});
  prevBtn.addEventListener('click',()=>setActive(idx-1,false));
  nextBtn.addEventListener('click',()=>setActive(idx+1,true));
  muteBtn.addEventListener('click',()=>{media.muted=!media.muted; muteBtn.textContent=media.muted?'🔈':'🔇';});
  volEl.addEventListener('input',e=>media.volume=parseFloat(e.target.value||'0.8'));

  waveBox.addEventListener('click',e=>{if(!isFinite(duration)||duration<=0)return; const r=waveBox.getBoundingClientRect(); const p=clamp((e.clientX-r.left)/r.width,0,1); media.currentTime=duration*p;});
  miniPlay.addEventListener('click',()=>{media.paused?media.play():media.pause();});
  miniWave.addEventListener('click',e=>{if(!isFinite(duration)||duration<=0)return; const r=miniWave.getBoundingClientRect(); const p=clamp((e.clientX-r.left)/r.width,0,1); media.currentTime=duration*p;});

  document.addEventListener('keydown',e=>{
    const tag=(e.target&&e.target.tagName||'').toLowerCase(); const editing=e.target?.isContentEditable||tag==='input'||tag==='textarea'||tag==='select';
    if(editing||e.metaKey||e.ctrlKey||e.altKey) return;
    if(e.code==='Space'){e.preventDefault(); media.paused?media.play().catch(()=>{}):media.pause();}
    else if(e.key==='ArrowRight'){e.preventDefault(); if(isFinite(duration)&&duration>0) media.currentTime=clamp((media.currentTime||0)+5,0,duration);}
    else if(e.key==='ArrowLeft'){e.preventDefault(); if(isFinite(duration)&&duration>0) media.currentTime=clamp((media.currentTime||0)-5,0,duration);}
    else if(e.key==='ArrowUp'){e.preventDefault(); media.volume=clamp((media.volume||0)+.05,0,1); volEl.value=String(media.volume);}
    else if(e.key==='ArrowDown'){e.preventDefault(); media.volume=clamp((media.volume||0)-.05,0,1); volEl.value=String(media.volume);}
  });

  let raf=null; function loop(){ if(isFinite(duration)&&duration>0){const p=(media.currentTime||0)/duration; PROG[idx]=p; paintActive(p); timeEl.textContent=fmt(media.currentTime)+' / '+fmt(duration);} raf=requestAnimationFrame(loop);}
  function startLoop(){cancelAnimationFrame(raf); raf=requestAnimationFrame(loop);}
  function stopLoop(){cancelAnimationFrame(raf); raf=null;}

  media.addEventListener('play',()=>{playBtn.textContent='⏸'; miniPlay.textContent='⏸'; showMini(); startLoop();});
  media.addEventListener('pause',()=>{playBtn.textContent='▶'; miniPlay.textContent='▶'; stopLoop(); PROG[idx]=(isFinite(duration)&&duration>0)?(media.currentTime||0)/duration:PROG[idx];});
  media.addEventListener('loadedmetadata',()=>{duration=Number.isFinite(media.duration)?media.duration:0; timeEl.textContent='00:00 / '+fmt(duration); waveBox.dataset.seekable=(isFinite(duration)&&duration>0)?'1':'0'; paintActive(PROG[idx]||0);});
  media.addEventListener('ended',()=>{PROG[idx]=0; setActive(idx+1,true);});
  media.addEventListener('error',()=>{const m=media.error; const map={1:'Playback aborted.',2:'Network error.',3:'Decoding error.',4:'Source not supported/blocked.'}; errEl.textContent='Audio error: '+(map[m&&m.code]||'Unknown.');});

  const THEME_KEY='s55pl_theme_social';
  function applyTheme(t){root.setAttribute('data-theme',t); mini.setAttribute('data-theme',t); themeBtn.textContent=(t==='dark'?'🌙 Dark':'☀️ Light');}
  const savedTheme=localStorage.getItem(THEME_KEY)||'dark'; applyTheme(savedTheme);
  themeBtn.addEventListener('click',()=>{const t=root.getAttribute('data-theme')==='dark'?'light':'dark'; localStorage.setItem(THEME_KEY,t); applyTheme(t);});

  let rAF=null; function reflowAll(){renderBig(idx); renderAllRows(); renderMini(idx); paintActive(PROG[idx]||0);}
  window.addEventListener('resize',()=>{if(rAF)cancelAnimationFrame(rAF); rAF=requestAnimationFrame(reflowAll);});
  window.addEventListener('orientationchange',()=>setTimeout(reflowAll,150));

  for(let i=0;i<PLAYLIST.length;i++){renderRow(i);} setActive(0,false);
})();
</script>

Text

<h2 style="white-space:pre-line">🚀 Social Media Audio Clips</h2>
<h3 style="white-space:pre-line">Bring your posts, reels, and ads to life with short-form audio that grabs attention instantly. We produce music and sound bites tailored for social platforms, ensuring your content stands out and engages your audience in seconds.</h3>

<style>
  .s55-links{background:#0f1118;color:#e7ecf2;padding:48px 16px;border-radius:16px}
  .s55-links h2{font-size:clamp(22px,2.6vw,32px);text-align:center;margin:0 0 24px}
  .s55-grid{display:grid;grid-template-columns:1fr;gap:18px;max-width:980px;margin:0 auto}
  @media(min-width:720px){.s55-grid{grid-template-columns:1fr 1fr}}
  .s55-card{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:18px 20px;border:1px solid #262a31;border-radius:14px;background:#121521;
    text-decoration:none;color:#e7ecf2;transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease}
  .s55-card:hover{transform:translateY(-3px);border-color:#3c77ff;box-shadow:0 8px 24px rgba(60,119,255,.15)}
  .s55-card span{font-size:clamp(16px,1.8vw,20px);font-weight:600;letter-spacing:.2px}
  .s55-arrow{width:22px;height:22px;flex:0 0 22px;border:1px solid #3c77ff;border-radius:50%;
    display:grid;place-items:center;}
  .s55-arrow svg{width:14px;height:14px}
  /* Optional subtitle style (if you want a one‑liner under the title later) */
  .s55-sub{display:block;opacity:.75;font-weight:400;font-size:clamp(13px,1.3vw,14px)}
</style>

<section class="s55-links" aria-label="Studio 55 Music Services">
  <h2>Pick your sound. We’ll make it sing.</h2>
  <div class="s55-grid">
    
    <a class="s55-card" href="/music/custom-jingles">
      <span>Custom Jingles</span>
      <div class="s55-arrow" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
      </div>
    </a>

    <a class="s55-card" href="/music/podcast-youtube">
      <span>Podcast &amp; YouTube</span>
      <div class="s55-arrow" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
      </div>
    </a>

    <a class="s55-card" href="/music/cinematic-music">
      <span>Cinematic Music</span>
      <div class="s55-arrow" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
      </div>
    </a>

    <a class="s55-card" href="/music/social-media-audio">
      <span>Social Media Audio</span>
      <div class="s55-arrow" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
      </div>
    </a>

    <a class="s55-card" href="/music/custom-songs">
      <span>Custom Songs</span>
      <div class="s55-arrow" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
      </div>
    </a>

    <a class="s55-card" href="/music/ambient-background">
      <span>Ambient &amp; Background</span>
      <div class="s55-arrow" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
      </div>
    </a>
  </div>
</section>


<script>
  (function(){
    var topLevelFix = [
      'custom-jingles','podcast-youtube','cinematic-music',
      'social-media-audio','custom-songs','ambient-background'
    ];
    var p = location.pathname.replace(/^\/+|\/+$/g,'');
    if(topLevelFix.includes(p)){
      location.replace('/music/' + p);
    }
  })();
</script>

<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-5178cb34-e179-43f5-9ac7-526e6f5df995" data-elfsight-app-lazy></div>