Text + image

<h2 style="white-space:pre-line">Crafting Harmony Through Design &amp; Sound</h2>At STUDIO 55, we blend the artistry of music production with the precision of innovative website design. Nestled in the vibrant heart of Colombia, our team is dedicated to creating immersive auditory and visual experiences that resonate with your audience. We believe in the power of creativity and technology to elevate your brand's presence, ensuring your message is heard loud and clear. Trust us to harmonize your digital vision with exceptional sound and design.

Embed

<style>
  .s55pl{background:#16181d;border:1px solid #262a31;border-radius:16px;padding:14px;
         width:min(100%,900px);margin:0 auto;box-sizing:border-box;overflow:hidden}
  .s55pl-cover{width:100%;height:300px;border-radius:12px;object-fit:cover;display:block;margin-bottom:10px}

  .s55pl-controls{
    display:grid;
    grid-template-columns:136px minmax(0,1fr) 230px;  /* <- widened right column */
    gap:12px;align-items:center;margin-bottom:10px
  }
  .s55pl-btns{display:flex;gap:8px}
  .s55pl-btn{height:40px;width:40px;border-radius:999px;border:0;background:#ff2d55;
             color:#fff;font-size:18px;cursor:pointer}
  .s55pl-btn.secondary{background:#262a31;border:1px solid #30333a}
  .s55pl-title{color:#e9edf1;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:#aab2bd;font-variant-numeric:tabular-nums;font-size:12px;min-width:84px;text-align:right}
  .s55pl-mute{height:28px;width:28px;border-radius:999px;border:1px solid #2a3038;background:#1c2027;color:#cfd5dd;cursor:pointer}
  .s55pl-vol{accent-color:#44d17a;width:120px;max-width:140px}

  .s55pl-wave{height:60px;border-radius:10px;background:#0b0d11;overflow:hidden;margin-bottom:10px}

  .s55pl-err{color:#ff9aa2;font-size:12px;margin:6px 0 0 0;min-height:16px}

  .s55pl-list{max-height:330px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;scrollbar-gutter:stable}
  .s55pl-item{display:grid;grid-template-columns:28px 1fr 60px;gap:8px;align-items:center;
              padding:8px 10px;border:1px solid #2a3038;border-radius:10px;background:#1a1e25;color:#e9edf1;cursor:pointer}
  .s55pl-item:hover{background:#20242d}
  .s55pl-idx{color:#aab2bd;text-align:center}
  .s55pl-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .s55pl-badge{justify-self:end;color:#c8ced8;background:#1c2027;border:1px solid #2a3038;border-radius:999px;font-size:11px;padding:3px 8px}
  .s55pl-item.active{box-shadow:inset 0 0 0 2px #ff2d55}

  @media (max-width:900px){ .s55pl-cover{height:240px} }
  @media (max-width:600px){
    .s55pl-controls{grid-template-columns:120px minmax(0,1fr) 190px}
    .s55pl-cover{height:200px}
    .s55pl-vol{width:72px}
  }
</style>

<div class="s55pl" id="s55pl-root">
  <img class="s55pl-cover"
       src="https://studio55.cloud/_next/image?url=https%3A%2F%2Fcdn.durable.co%2Fblocks%2F12leFkKb4TZYEHB9SDedfqQcJkV7UoGTwGAlmngsyViRCXIJm9eKvB0S0kO3n100.png&w=1920&q=90"
       alt="Cover art" 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"/>
    </div>
  </div>

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

<script>
(function(){
  function ensureWS(cb){
    if (window.WaveSurfer) return cb();
    var s=document.createElement('script');
    s.src='https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.min.js';
    s.onload=cb; document.head.appendChild(s);
  }

  // 8 tracks (your two files, repeated)
  const A = { title:'Track A', artist:'Studio 55', file:'https://cdn.commoninja.com/asset/ecd65198-c98b-4082-bb84-13dc02071b0d.mp3' };
  const B = { title:'Track B', artist:'Studio 55', file:'https://cdn.commoninja.com/asset/ba1f6003-ec2e-4a3f-9143-c63d75912acd.mp3' };
  const PLAYLIST = [A,B,A,B,A,B,A,B];

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

  ensureWS(function(){
    const root   = document.getElementById('s55pl-root');
    const titleEl= root.querySelector('[data-role="title"]');
    const timeEl = root.querySelector('[data-role="time"]');
    const listEl = document.getElementById('s55pl-list');
    const errEl  = document.getElementById('s55pl-err');
    const muteBtn= root.querySelector('[data-action="mute"]');
    const volEl  = root.querySelector('.s55pl-vol');
    const playBtn= root.querySelector('[data-action="play"]');

    // Build list
    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-badge">SFX</div>`;
      listEl.appendChild(row);
    });

    // Use a real <audio> (best for cross-origin)
    const media = new Audio();
    media.crossOrigin='anonymous';
    media.preload='metadata';
    media.volume = parseFloat(volEl.value || '0.8');

    const ws = WaveSurfer.create({
      container:'#s55pl-wave',
      backend:'MediaElement',
      media,
      url: PLAYLIST[0].file,
      waveColor:'#394150',
      progressColor:'#44d17a',
      cursorColor:'#c9ced6',
      height:60, barWidth:2, barGap:2, dragToSeek:true
    });

    let idx=0;
    function setActive(i, autoplay=false){
      idx=(i+PLAYLIST.length)%PLAYLIST.length;
      const tr=PLAYLIST[idx];
      errEl.textContent='';
      titleEl.textContent=tr.title+(tr.artist?(' — '+tr.artist):'');
      [...listEl.children].forEach(el=>el.classList.toggle('active', Number(el.dataset.idx)===idx));
      ws.load(tr.file);
      if(autoplay) ws.once('ready', ()=> ws.play());
      const row=listEl.children[idx]; if(row) row.scrollIntoView({block:'nearest', inline:'nearest'});
    }

    // Controls
    root.querySelector('[data-action="prev"]').addEventListener('click', ()=> setActive(idx-1,false));
    root.querySelector('[data-action="next"]').addEventListener('click', ()=> setActive(idx+1,false));
    playBtn.addEventListener('click', ()=> ws.playPause());

    listEl.addEventListener('click', e=>{
      const row=e.target.closest('.s55pl-item'); if(!row) return;
      setActive(Number(row.dataset.idx), true);
    });

    muteBtn.addEventListener('click', ()=>{
      media.muted = !media.muted;
      muteBtn.textContent = media.muted ? '🔈' : '🔇';
    });
    volEl.addEventListener('input', e=>{ media.volume = parseFloat(e.target.value||'0.8'); });

    // Events
    ws.on('play', ()=> playBtn.textContent='⏸');
    ws.on('pause',()=> playBtn.textContent='▶');
    ws.on('ready',()=> timeEl.textContent='00:00 / '+fmt(ws.getDuration()));
    ws.on('timeupdate', t => timeEl.textContent=fmt(t)+' / '+fmt(ws.getDuration()));
    ws.on('finish',()=> setActive(idx+1, true));
    ws.on('error', e=> { errEl.textContent='Load error: '+(e && e.message ? e.message : e); });

    setActive(0,false);
  });
})();
</script>

Image

modern workspace with computer music website design

<style>
  .s55pl{background:#16181d;border:1px solid #262a31;border-radius:16px;padding:14px;
         width:min(100%,900px);margin:0 auto;box-sizing:border-box}
  .s55pl h2{margin:0 0 10px 0;color:#e9edf1;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:136px minmax(0,1fr) 260px;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:#ff2d55;color:#fff;font-size:18px;cursor:pointer}
  .s55pl-btn.secondary{background:#262a31;border:1px solid #30333a}
  .s55pl-title{color:#e9edf1;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:#aab2bd;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 #2a3038;background:#1c2027;color:#cfd5dd;cursor:pointer}
  .s55pl-vol{accent-color:#44d17a;width:120px;max-width:160px}

  /* Faux waveform (no CORS needed) */
  .s55pl-wavebox{position:relative;height:64px;border-radius:10px;background:#0b0d11;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:#394150;border-radius:1px}
  .s55pl-bars--prog{width:0;overflow:hidden}
  .s55pl-bars--prog i{background:#44d17a}
  .s55pl-wavebox[data-seekable="1"]{cursor:pointer}

  .s55pl-err{color:#ff9aa2;font-size:12px;margin:4px 0;min-height:16px}
  .s55pl-list{max-height:330px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;scrollbar-gutter:stable}
  .s55pl-item{display:grid;grid-template-columns:28px 1fr 60px;gap:8px;align-items:center;
              padding:8px 10px;border:1px solid #2a3038;border-radius:10px;background:#1a1e25;color:#e9edf1;cursor:pointer}
  .s55pl-item:hover{background:#20242d}
  .s55pl-idx{color:#aab2bd;text-align:center}
  .s55pl-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .s55pl-badge{justify-self:end;color:#c8ced8;background:#1c2027;border:1px solid #2a3038;border-radius:999px;font-size:11px;padding:3px 8px}
  .s55pl-item.active{box-shadow:inset 0 0 0 2px #ff2d55}

  @media (max-width:600px){
    .s55pl-controls{grid-template-columns:120px minmax(0,1fr) 200px}
    .s55pl-vol{width:90px}
    .s55pl-cover{height:200px}
  }
</style>

<div class="s55pl" id="s55pl-jingles">
  <h2>Custom Jingles – Studio 55</h2>
  <img class="s55pl-cover"
       src="https://studio55.cloud/_next/image?url=https%3A%2F%2Fcdn.durable.co%2Fblocks%2F12leFkKb4TZYEHB9SDedfqQcJkV7UoGTwGAlmngsyViRCXIJm9eKvB0S0kO3n100.png&w=1920&q=90"
       alt="Cover art" 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"/>
    </div>
  </div>

  
  <div class="s55pl-wavebox" id="s55pl-wavebox" data-seekable="1">
    <div class="s55pl-bars" id="s55pl-bars"></div>
    <div class="s55pl-bars s55pl-bars--prog" id="s55pl-bars-prog"></div>
  </div>

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

<script>
(function(){
  // Your playlist (18 tracks)
  const PLAYLIST = [
    { title:'Cruisin',                artist:'Custom Jingles', file:'https://cdn.commoninja.com/asset/cb31ac55-9424-40a3-b49e-46af855a2774.mp3' },
    { title:'Dance With Me',          artist:'Custom Jingles', file:'https://cdn.commoninja.com/asset/b6f558e8-e7b7-4da8-aa36-65e766a0b698.mp3' },
    { title:'Disco Street',           artist:'Custom Jingles', file:'https://cdn.commoninja.com/asset/7ef0e2b3-65d3-40d9-86a2-ae53be1fd731.mp3' },
    { title:'Espirit De Corps',       artist:'Custom Jingles', file:'https://cdn.commoninja.com/asset/d6180b4a-e60b-4804-9c1d-36b1d9a7d943.mp3' },
    { title:'Funk In the Funk',       artist:'Custom Jingles', file:'https://cdn.commoninja.com/asset/a0e5c566-0fb0-4ed6-84a1-d890cccb1cfe.mp3' },
    { title:'Funkasaurus',            artist:'Custom Jingles', file:'https://cdn.commoninja.com/asset/6e8d869d-1e15-4eaf-81c7-d0174b93b45f.mp3' },
    { title:'Giggle Factory',         artist:'Custom Jingles', file:'https://cdn.commoninja.com/asset/dcbe5a7d-a325-4881-bf29-14361d14accb.mp3' },
    { title:'Life Made More',         artist:'Custom Jingles', file:'https://cdn.commoninja.com/asset/fd846ef1-35cf-47bd-9b62-df1228be0414.mp3' },
    { title:'Monkeys Spinning',       artist:'Custom Jingles', file:'https://cdn.commoninja.com/asset/43b20820-bc8d-49fd-a396-a224d6610fc4.mp3' },
    { title:'Big Apple',              artist:'Custom Jingles', file:'https://cdn.commoninja.com/asset/852fd488-a531-4c6c-808d-bdaaee0ebd82.mp3' },
    { title:'Paul Sounds Fire',       artist:'Custom Jingles', file:'https://cdn.commoninja.com/asset/f1b69d64-6cc8-4a66-8b94-0783549e496e.mp3' },
    { title:'Peak Season',            artist:'Custom Jingles', file:'https://cdn.commoninja.com/asset/190d0b2b-06da-4859-90c7-f201f819ca1c.mp3' },
    { title:'Picture Frames',         artist:'Custom Jingles', file:'https://cdn.commoninja.com/asset/920385e5-9701-409c-9b43-0de94094f773.mp3' },
    { title:'Pines Violet Sky',       artist:'Custom Jingles', file:'https://cdn.commoninja.com/asset/044861f7-00e2-4e05-8239-1a09ba792b23.mp3' },
    { title:'Reo Live',               artist:'Custom Jingles', file:'https://cdn.commoninja.com/asset/815525bd-e031-4838-a196-82fb0c1af853.mp3' },
    { title:'Tethers Light',          artist:'Custom Jingles', file:'https://cdn.commoninja.com/asset/599d42d3-7813-4cb1-860d-6c49693cbc80.mp3' },
    { title:'My Ukele',               artist:'Custom Jingles', file:'https://cdn.commoninja.com/asset/9b79f2e7-2ed4-4e5d-9360-754a17b7d24f.mp3' },
    { title:'When Things Are Flawless', artist:'Custom Jingles', file:'https://cdn.commoninja.com/asset/e1ff2db3-bf99-4bbe-9e95-e0c594ad9c15.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 root    = document.getElementById('s55pl-jingles');
  const listEl  = document.getElementById('s55pl-list-jingles');
  const errEl   = document.getElementById('s55pl-err-jingles');
  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 waveBox = document.getElementById('s55pl-wavebox');
  const barsBG  = document.getElementById('s55pl-bars');
  const barsFG  = document.getElementById('s55pl-bars-prog');

  // Pure HTML5 audio (no CORS requirements)
  const media = new Audio();
  media.preload = 'metadata';
  media.volume  = parseFloat(volEl.value || '0.8');

  // Deterministic tiny RNG so each track keeps a consistent "wave"
  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; }; }

  // Build bars to exactly fill the container width
  const BAR_W = 2, BAR_G = 2; // px
  function barCount(){ return Math.max(40, Math.floor(waveBox.clientWidth / (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(0.12, Math.min(0.98, v)) * 100;
      const el = document.createElement('i');
      el.style.height = h+'%';
      el.style.width  = BAR_W+'px';
      container.appendChild(el);
    }
  }

  function renderWaveFor(trackIndex){
    const key = PLAYLIST[trackIndex].title + PLAYLIST[trackIndex].file;
    const seed = seedInt(key);
    const count = barCount();
    buildBars(barsBG, count, seed);
    buildBars(barsFG, count, seed);
    barsFG.style.width='0%';
  }

  // Build list
  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-badge">Jingle</div>`;
    listEl.appendChild(row);
  });

  let idx=0, duration=0;

  function setActive(i, userGesture=false){
    idx=(i+PLAYLIST.length)%PLAYLIST.length;
    const tr=PLAYLIST[idx];
    errEl.textContent='';
    titleEl.textContent = tr.title + (tr.artist?(' — '+tr.artist):'');
    [...listEl.children].forEach(el=>el.classList.toggle('active', Number(el.dataset.idx)===idx));

    media.src = tr.file;
    media.load();
    renderWaveFor(idx);

    if (userGesture){
      const p = media.play(); if (p && p.catch) p.catch(()=>{});
    }
  }

  // Controls
  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'));

  // Seek by clicking the waveform box
  waveBox.addEventListener('click', (e)=>{
    if (!isFinite(duration) || duration<=0) return;
    const rect = waveBox.getBoundingClientRect();
    const p = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
    media.currentTime = duration * p;
  });

  // Media events
  media.addEventListener('play', ()=> playBtn.textContent='⏸');
  media.addEventListener('pause',()=> playBtn.textContent='▶');
  media.addEventListener('loadedmetadata', ()=>{
    duration = media.duration || 0;
    timeEl.textContent = '00:00 / '+fmt(duration);
    waveBox.dataset.seekable = isFinite(duration) && duration>0 ? '1' : '0';
    barsFG.style.width='0%';
  });
  media.addEventListener('timeupdate', ()=>{
    if (isFinite(duration) && duration>0){
      const p = media.currentTime / duration;
      barsFG.style.width = (p*100)+'%';
    }
    timeEl.textContent = fmt(media.currentTime)+' / '+fmt(duration);
  });
  media.addEventListener('ended', ()=> 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.');
  });

  // Click track to play/pause if same; switch if different
  listEl.addEventListener('click', (e)=>{
    const row = e.target.closest('.s55pl-item'); if (!row) return;
    const i = Number(row.dataset.idx);
    if (i === idx){
      media.paused ? media.play().catch(()=>{}) : media.pause();
    } else {
      setActive(i, true);
    }
  });

  // Rebuild bars on resize for perfect edge-to-edge fit
  let rAF=null;
  window.addEventListener('resize', ()=>{
    if (rAF) cancelAnimationFrame(rAF);
    rAF = requestAnimationFrame(()=> renderWaveFor(idx));
  });

  setActive(0,false);
})();
</script>

Crafting Harmony Through Design & Sound

Crafting Harmony Through Design & Sound

Custom Jingles – Studio 55