static/app.html

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>创作 · StepAudio-3-Music</title>
<meta name="description" content="StepAudio-3-Music —— 用一句话描述，听见一首完整的歌。">
<meta name="color-scheme" content="light">
<meta name="theme-color" content="#F2F2F0">
<link rel="icon" href="assets/logos/stepfun.png">
<link rel="preload" href="assets/fonts/instrument-sans-latin-wght-normal.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="assets/css/tokens.css">
<link rel="stylesheet" href="assets/css/base.css">
<link rel="stylesheet" href="assets/css/app.css">
<link rel="stylesheet" href="assets/css/player.css">
</head>
<body>

<!-- ══ 图标 sprite（Lucide，ISC 许可，内联无请求）+ 唱臂金属渐变 ══════════════
     渐变必须用 userSpaceOnUse：默认的 objectBoundingBox 在垂直线上
     bbox 宽度为 0，会让描边完全不可见。                                    -->
<svg width="0" height="0" aria-hidden="true" style="position:absolute"><defs>
  <linearGradient id="armMetal" gradientUnits="userSpaceOnUse" x1="340" y1="0" x2="364" y2="0">
    <stop offset="0" stop-color="#4b4f57"/><stop offset=".3" stop-color="#9ba1ab"/>
    <stop offset=".52" stop-color="#767d89"/><stop offset="1" stop-color="#33363d"/>
  </linearGradient>
  <g id="i-house"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.6V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.6"/><path d="M9.5 21v-6h5v6"/></g>
  <g id="i-headphones"><path d="M3 15v-3a9 9 0 0 1 18 0v3"/><path d="M3 16a2 2 0 0 1 2-2h1v6H5a2 2 0 0 1-2-2Z"/><path d="M21 16a2 2 0 0 0-2-2h-1v6h1a2 2 0 0 0 2-2Z"/></g>
  <g id="i-sliders"><path d="M3 7h12M19 7h2M3 12h4M11 12h10M3 17h10M17 17h4"/><circle cx="17" cy="7" r="2"/><circle cx="9" cy="12" r="2"/><circle cx="15" cy="17" r="2"/></g>
  <g id="i-disc"><circle cx="12" cy="12" r="9"/><path d="M6 12a6 6 0 0 1 6-6"/><path d="M18 12a6 6 0 0 1-6 6"/><circle cx="12" cy="12" r="1.8"/></g>
  <g id="i-mail"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="m3.8 6.6 8.2 5.8 8.2-5.8"/></g>
  <g id="i-file"><path d="M14 3v5h5"/><path d="M19 8.5V19a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7Z"/><path d="M9 13h6M9 17h4"/></g>
  <g id="i-code"><path d="m8 9-3 3 3 3M16 9l3 3-3 3M13.5 5l-3 14"/></g>
  <g id="i-music"><circle cx="7" cy="18" r="3"/><circle cx="18" cy="15.5" r="3"/><path d="M10 18V6l11-2.5v12"/></g>
  <g id="i-panel-close"><rect x="3" y="4" width="18" height="16" rx="2.5"/><path d="M9.5 4v16"/><path d="m16 9.5-2 2.5 2 2.5"/></g>
  <g id="i-panel-open"><rect x="3" y="4" width="18" height="16" rx="2.5"/><path d="M9.5 4v16"/><path d="m14 9.5 2 2.5-2 2.5"/></g>
  <g id="i-play"><path d="M7.5 4.8v14.4L19.5 12 7.5 4.8Z" fill="currentColor" stroke="none"/></g>
  <g id="i-pause"><path d="M9 5v14M15 5v14" stroke-width="2.4"/></g>
  <g id="i-prev"><path d="M17.5 5.4v13.2L8 12l9.5-6.6Z" fill="currentColor" stroke="none"/><path d="M6 5.5v13"/></g>
  <g id="i-next"><path d="M6.5 5.4v13.2L16 12 6.5 5.4Z" fill="currentColor" stroke="none"/><path d="M18 5.5v13"/></g>
  <g id="i-heart"><path d="M12 20.2s-7.2-4.6-7.2-9.7A4.6 4.6 0 0 1 12 6.9a4.6 4.6 0 0 1 7.2 3.6c0 5.1-7.2 9.7-7.2 9.7Z"/></g>
  <g id="i-download"><path d="M12 3v12M7.5 10.5 12 15l4.5-4.5M5 20h14"/></g>
  <g id="i-repeat"><path d="m17 2.5 3.5 3.5L17 9.5"/><path d="M3.5 11.5V10a4 4 0 0 1 4-4h13"/><path d="m7 21.5-3.5-3.5L7 14.5"/><path d="M20.5 12.5V14a4 4 0 0 1-4 4h-13"/></g>
  <g id="i-repeat-1"><path d="m17 2.5 3.5 3.5L17 9.5"/><path d="M3.5 11.5V10a4 4 0 0 1 4-4h13"/><path d="m7 21.5-3.5-3.5L7 14.5"/><path d="M20.5 12.5V14a4 4 0 0 1-4 4h-13"/><path d="M11 11.5l1.5-1v5" stroke-width="1.9"/></g>
  <g id="i-volume"><path d="M11 5 6.2 9H3v6h3.2L11 19V5Z"/><path d="M15.4 8.6a4.8 4.8 0 0 1 0 6.8M18.4 6a8.5 8.5 0 0 1 0 12"/></g>
  <g id="i-volume-x"><path d="M11 5 6.2 9H3v6h3.2L11 19V5Z"/><path d="m16 9.5 5 5M21 9.5l-5 5"/></g>
  <g id="i-chev-up"><path d="m6.5 14 5.5-5.5L17.5 14"/></g>
  <g id="i-chev-down"><path d="m6.5 10 5.5 5.5L17.5 10"/></g>
  <g id="i-dices"><rect x="3" y="9.5" width="11.5" height="11.5" rx="2.6"/><path d="m9.8 9.4 2.6-4.9a2 2 0 0 1 2.7-.8l4.2 2.3a2 2 0 0 1 .8 2.7l-2.5 4.6"/><circle cx="7" cy="13.2" r=".9"/><circle cx="10.6" cy="17.3" r=".9"/></g>
  <g id="i-refresh"><path d="M3.5 12a8.5 8.5 0 0 1 14.3-6.2L20.5 8"/><path d="M20.5 3.2V8h-4.8"/><path d="M20.5 12a8.5 8.5 0 0 1-14.3 6.2L3.5 16"/><path d="M3.5 20.8V16h4.8"/></g>
  <g id="i-arrow"><path d="M5 12h13M12.5 6l6 6-6 6"/></g>
  <g id="i-x"><path d="m6.5 6.5 11 11M17.5 6.5l-11 11"/></g>
  <g id="i-waves"><path d="M3 12v1.5M6.5 9v6M10 5.5v13M13.5 8v8M17 10.5v3M20.5 11.5v1"/></g>
  <g id="i-upload"><path d="M12 15.5V3.5M7.5 8 12 3.5 16.5 8M5 20h14"/></g>
  <g id="i-check"><path d="m5 13 4.5 4.5L19 7"/></g>
  <g id="i-alert"><circle cx="12" cy="12" r="9"/><path d="M12 7.5v5.5M12 16.4v.2"/></g>
  <g id="i-trash"><path d="M4 7h16M9.5 7V4h5v3M6.5 7l1 13h9l1-13M10 11v6M14 11v6"/></g>
  <g id="i-sparkle"><path d="M12 3.5v4M12 16.5v4M3.5 12h4M16.5 12h4M6.2 6.2l2.6 2.6M15.2 15.2l2.6 2.6M17.8 6.2l-2.6 2.6M8.8 15.2l-2.6 2.6"/></g>
  <g id="i-key"><circle cx="7.8" cy="16.2" r="4.3"/><path d="M11 13.1 19.8 4.3"/><path d="m16.3 7.6 2.6 2.6 2.3-2.3-2.6-2.6"/></g>
  <g id="i-eye"><path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12S18 18.5 12 18.5 2.5 12 2.5 12Z"/><circle cx="12" cy="12" r="2.9"/></g>
  <g id="i-eye-off"><path d="M3 3l18 18"/><path d="M10.6 6.2A9.7 9.7 0 0 1 12 6.1c6 0 9.5 5.9 9.5 5.9a18 18 0 0 1-2.6 3.3"/><path d="M6.9 7.1A17.6 17.6 0 0 0 2.5 12S6 17.9 12 17.9c1.4 0 2.8-.3 4-.9"/></g>
</defs></svg>

<div class="app" id="app" data-nav="full">

  <!-- ══ 侧栏 ═════════════════════════════════════════════════════════════ -->
  <nav class="nav" aria-label="主导航">
    <a class="brand" href="app.html#/" aria-label="StepAudio 3 Music">
      <img class="brand-logo" src="assets/logos/stepfun.png" alt="" width="30" height="30">
      <span class="brand-wm"><b data-i18n="brand.name">StepAudio 3</b><i data-i18n="brand.sub">Music</i></span>
    </a>

    <a class="nav-item" href="#/" data-route="home" data-tip-i18n="nav.home">
      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><use href="#i-house"/></svg>
      <span class="nav-label" data-i18n="nav.home">首页</span>
    </a>
    <a class="nav-item" href="#/listen" data-route="listen" data-tip-i18n="nav.listen">
      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><use href="#i-headphones"/></svg>
      <span class="nav-label" data-i18n="nav.listen">聆听</span>
    </a>
    <a class="nav-item" href="#/create" data-route="create" data-tip-i18n="nav.create">
      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><use href="#i-sliders"/></svg>
      <span class="nav-label" data-i18n="nav.create">创作</span>
    </a>
    <a class="nav-item" href="#/library" data-route="library" data-tip-i18n="nav.library">
      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><use href="#i-disc"/></svg>
      <span class="nav-label" data-i18n="nav.library">曲库</span>
    </a>

    <div class="nav-foot">
      <a class="nav-sub" href="mailto:bella@stepfun.com" data-tip-i18n="nav.contact">
        <svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><use href="#i-mail"/></svg>
        <span class="nav-label" data-i18n="nav.contact">联系</span>
      </a>
      <a class="nav-sub" href="https://arxiv.org/abs/2609.16034" target="_blank" data-tip-i18n="nav.arxiv">
        <svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><use href="#i-file"/></svg>
        <span class="nav-label" data-i18n="nav.arxiv">ArXiv</span><span class="ext">↗</span>
      </a>
      <a class="nav-sub" href="https://platform.stepfun.ai/docs/en/guides/models/stepaudio-3-music" target="_blank" data-tip-i18n="nav.api">
        <svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><use href="#i-code"/></svg>
        <span class="nav-label" data-i18n="nav.api">API 文档</span><span class="ext">↗</span>
      </a>
      <!-- 访客自备 Key：点开中间的配置面板（见 assets/js/apikey.js） -->
      <button class="nav-sub" id="navApiKey" style="display:none" data-tip-i18n="nav.apikey">
        <svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><use href="#i-key"/></svg>
        <span class="nav-label" data-i18n="nav.apikey">API 配置</span>
        <span class="key-dot" id="navKeyDot" aria-hidden="true"></span>
      </button>
      <div class="lang-switch" role="group" aria-label="语言 / Language">
        <button data-lang="zh" aria-pressed="true">中文</button>
        <button data-lang="en" aria-pressed="false">EN</button>
      </div>

      <button class="nav-sub nav-collapse" id="navToggle" data-tip-i18n="nav.expand">
        <svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><use href="#i-panel-close" id="navToggleIcon"/></svg>
        <span class="nav-label" data-i18n="nav.collapse">收起</span>
      </button>
    </div>
  </nav>

  <!-- ══ 主内容区 ═════════════════════════════════════════════════════════ -->
  <main class="main" id="main">
    <section class="view" id="view-home" aria-label="首页"></section>
    <section class="view" id="view-listen" aria-label="聆听"></section>
    <section class="view" id="view-create" aria-label="创作"></section>
    <section class="view" id="view-library" aria-label="曲库"></section>
  </main>
</div>

<!-- ══ 浮动播放胶囊 ═══════════════════════════════════════════════════════ -->
<div class="player" id="player" aria-label="播放器">
  <button class="pl-close" id="plClose"><svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-x"/></svg></button>
  <div class="pl-track">
    <button class="tt tt-btn" id="plTT" data-size="s" data-detail="low" data-state="idle">
      <div class="tt-plate"><div class="tt-label"><img id="plLabel" src="assets/logos/stepfun.png" alt=""></div><span class="tt-hole"></span></div>
      <div class="tt-sheen"></div><div class="tt-rim"></div>
      <svg class="tt-arm" viewBox="0 0 400 400" aria-hidden="true"><g class="arm">
        <path class="tube" d="M352 64 C352 108 330 128 330 172 C330 212 348 216 348 252"/>
        <circle class="bearing-o" cx="352" cy="52" r="17"/><circle class="bearing-i" cx="352" cy="52" r="7"/>
        <line class="styl" x1="348" y1="256" x2="348" y2="276"/>
      </g></svg>
    </button>
    <div class="m"><b id="plTitle"></b><small id="plTags"></small></div>
  </div>

  <div class="pl-transport">
    <button class="pl-btn" id="plPrev"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-prev"/></svg></button>
    <button class="pl-btn pl-play" id="plPlay"><svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-play" id="plPlayIcon"/></svg></button>
    <button class="pl-btn" id="plNext"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-next"/></svg></button>
  </div>

  <div class="pl-seek">
    <span class="t" id="plCur">0:00</span>
    <canvas class="peaks" id="plPeaks" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></canvas>
    <span class="t" id="plDur">0:00</span>
  </div>

  <div class="pl-right">
    <button class="pl-btn" id="plLike"><svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-heart"/></svg></button>
    <button class="pl-btn pl-dl" id="plDownload"><svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-download"/></svg></button>
    <button class="pl-btn pl-repeat" id="plRepeat"><svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-repeat" id="plRepeatIcon"/></svg></button>
    <span class="vol">
      <button class="pl-btn" id="plMute"><svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-volume" id="plMuteIcon"/></svg></button>
      <input type="range" id="plVol" min="0" max="100" value="85">
    </span>
    <button class="pl-btn" id="plExpand"><svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><use href="#i-chev-up"/></svg></button>
  </div>
</div>

<!-- ══ 展开播放面板 ═══════════════════════════════════════════════════════ -->
<div class="np-scrim" id="npScrim"></div>
<div class="np" id="np" role="dialog" aria-modal="true" aria-label="正在播放" data-mode="song">
  <button class="np-close" id="npClose"><svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><use href="#i-x"/></svg></button>
  <div class="np-bg" aria-hidden="true"><i id="npBg"></i></div>

  <div class="np-stage">
    <p class="eyebrow" id="npTask"></p>
    <h2 class="np-title" id="npTitle"></h2>
    <p class="np-tags tnum" id="npTags"></p>

    <div class="np-tt">
      <div class="tt" id="npTT" data-size="l" data-state="idle">
        <div class="tt-plate"><div class="tt-label"><img id="npLabel" alt=""></div><span class="tt-hole"></span></div>
        <div class="tt-sheen"></div><div class="tt-rim"></div>
        <svg class="tt-arm" viewBox="0 0 400 400" aria-hidden="true"><g class="arm">
          <line class="tube" x1="352" y1="28" x2="352" y2="48"/>
          <rect class="cw" x="338" y="6" width="28" height="23" rx="11"/>
          <!-- S 形臂管：中段向左鼓出再收回，唱针仍落在轴心正下方，
               这样 §几何 的三个角度（−8/+10/+32）不用重算 -->
          <path class="tube" d="M352 64 C352 108 330 128 330 172 C330 212 348 216 348 250"/>
          <path class="tube-hi" d="M349 76 C349 112 327 130 327 172 C327 208 345 212 345 240"/>
          <circle class="bearing-o" cx="352" cy="52" r="12"/><circle class="bearing-i" cx="352" cy="52" r="5"/>
          <path class="head" d="M339 248h18l-2 20a4 4 0 0 1-4 3h-6a4 4 0 0 1-4-3Z"/>
          <line class="styl" x1="348" y1="271" x2="348" y2="279"/>
        </g></svg>
      </div>
    </div>

    <div class="np-transport">
      <canvas class="np-spectrum" id="npSpectrum" aria-hidden="true"></canvas>
      <div class="np-line" id="npLine" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
        <i class="np-line-fill"></i><i class="np-line-dot"></i>
      </div>
      <div class="np-times"><span id="npCur">0:00</span><span id="npDur">0:00</span></div>
      <div class="np-btns">
        <button class="pl-btn" id="npPrev"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-prev"/></svg></button>
        <button class="np-big" id="npPlay"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-play" id="npPlayIcon"/></svg></button>
        <button class="pl-btn" id="npNext"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-next"/></svg></button>
      </div>
      <div class="np-acts">
        <button class="pl-btn" id="npLike"><svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-heart"/></svg></button>
        <button class="pl-btn" id="npDownload"><svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-download"/></svg></button>
        <button class="pl-btn" id="npRepeat"><svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-repeat" id="npRepeatIcon"/></svg></button>
      </div>
    </div>
  </div>

  <div class="np-words" id="npWords"></div>
</div>

<canvas id="notes" aria-hidden="true"></canvas>
<div class="toasts" id="toasts" role="status" aria-live="polite"></div>
<audio id="audio" preload="metadata" playsinline></audio>

<script type="module" src="assets/js/main.js"></script>
</body>
</html>