來分享一個我自己上班時很常聽的音樂平台--街聲

(因為有時候開YT聽音樂我會一直分享去挑歌曲，而街聲裡面都是我沒聽過的新歌就不會一直分心)

不需要登入，打開網站直接就能聽到很多好聽的獨立製作人創作的音樂

我很多喜歡的歌都是在這邊放著自動撥時聽到的

例如這首 你留給我的遺憾無以名狀

有很多很多好聽的歌都能在上面找到

街聲本身就有嵌入功能(讓人回想起以前玩部落格時期很多東西都能嵌入XD)

它們提供了兩種撥放器

直接貼在你要加的位置就行(像我貼這樣就是加在文章最上面)

這樣就能直接將撥放器嵌入進去了

由於是使用它們網站的撥放器，因此樣式我們沒法進行修改

最多就是改大小而已

新增 source/js/fit-embeds.js

// StreetVoice 內嵌：滿版等比 + 可視高度裁切 + 標題列
(function(){
  const BASE_W = 330, BASE_H = 100;
  const selector = 'iframe[src*="streetvoice.com/music/embed"]';

  function ensureCard(iframe){
    // 外層卡片
    let card = iframe.closest('.sv-card');
    if(!card){
      card = document.createElement('div');
      card.className = 'sv-card';
      iframe.parentElement.insertBefore(card, iframe);
      card.appendChild(iframe);
    }
    // 內層容器
    let box = iframe.closest('.sv-embed');
    if(!box){
      box = document.createElement('div');
      box.className = 'sv-embed';
      card.insertBefore(box, iframe);
      box.appendChild(iframe);
    }
    // 標題列（只建一次；可用 data-sv-title 覆蓋文字）
    let title = card.querySelector('.sv-titlebar');
    const text = iframe.dataset.svTitle || '來聽點音樂吧～';
    if(!title){
      title = document.createElement('div');
      title.className = 'sv-titlebar';
      title.textContent = text;
      card.insertBefore(title, box);
    }else if(iframe.dataset.svTitle){
      title.textContent = text;
    }

    // 基本外觀
    card.style.borderRadius = '16px';
    card.style.padding = '14px 16px';
    card.style.margin = '12px 0 18px';
    card.style.background = 'linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75))';
    card.style.boxShadow = '0 8px 24px rgba(0,0,0,.08)';
    card.style.backdropFilter = 'blur(6px)';

    box.style.width = '100%';
    box.style.overflow = 'hidden';
    box.style.borderRadius = '12px';

    iframe.style.border = '0';
    iframe.style.display = 'block';
    iframe.style.transformOrigin = 'top left';

    return { card, box };
  }

  function getCrop(iframe){
    const v =
      iframe.dataset.svCrop ||
      iframe.closest('.sv-card')?.dataset.svCrop ||
      iframe.closest('.sv-embed')?.dataset.svCrop;
    const r = parseFloat(v);
    return (r > 0 && r <= 1) ? r : 1; // 預設不裁
  }

  function getAlign(iframe){
    const v =
      (iframe.dataset.svAlign ||
       iframe.closest('.sv-card')?.dataset.svAlign ||
       iframe.closest('.sv-embed')?.dataset.svAlign || 'center').toLowerCase();
    return (v === 'top' || v === 'bottom') ? v : 'center';
  }

  function fitOne(iframe){
    const { box } = ensureCard(iframe);

    const w = box.clientWidth || BASE_W;
    const scale = w / BASE_W;

    // 固定原始尺寸，再用 scale 放大
    iframe.style.width  = BASE_W + 'px';
    iframe.style.height = BASE_H + 'px';

    // 計算裁切後高度
    const crop  = getCrop(iframe);       // 0~1
    const fullH = BASE_H * scale;
    const visH  = fullH * crop;

    // 垂直對齊
    const align = getAlign(iframe);
    let offsetY = 0;
    if (crop < 1) {
      if (align === 'center')      offsetY = (fullH - visH) / 2;
      else if (align === 'bottom') offsetY = (fullH - visH);
    }

    iframe.style.transform = `translateY(-${offsetY}px) scale(${scale})`;
    box.style.height = visH + 'px';
  }

  function fitAll(){
    document.querySelectorAll(selector).forEach(fitOne);
  }

  document.addEventListener('DOMContentLoaded', ()=>{
    fitAll();
    setTimeout(fitAll, 300);
    setTimeout(fitAll, 1000);
  });
  window.addEventListener('resize', fitAll);
})();

在 source/style.css 末尾加點特效(就是滑鼠過去會放大)

/* StreetVoice 卡片外觀與 hover 動效 */
.sv-card{
  transition: transform .18s ease, box-shadow .18s ease;
}
.sv-card:hover{
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* 標題列樣式 */
.sv-titlebar{
  font-weight: 700;
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.sv-titlebar::before{
  content: "🎵";
  font-size: 16px;
  opacity: .9;
}

/* 內嵌容器，維持圓角 */
.sv-embed{ width:100%; overflow:hidden; border-radius:12px; }
.sv-embed iframe{ border:0; display:block; }

記得要在header中引用

<script src="<%= url_for('/js/fit-embeds.js') %>"></script>

文章中的用法（可以自訂文字與高度）

<iframesrc="https://streetvoice.com/music/embed/?id=609974"
  frameborder="0" scrolling="no" allow="autoplay"
  data-sv-title="來聽點音樂吧～"  <!-- 顯示在卡片上方；不寫則用預設句 -->
  data-sv-crop="0.5"               <!-- 顯示 50% 高度；0.35~0.8 都可 -->
  data-sv-align="center"           <!-- top / center / bottom -->
></iframe>

全部設定完記得存檔

這樣就能直接使用網站中的音樂了！看文章時配一點BGM正好XD