js实现可视化五线谱曲子设计编辑试听导出midi曲谱编辑器代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：js实现可视化五线谱曲子设计编辑试听导出midi曲谱编辑器代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>谱笺 ScoreCraft · 五线谱创作台</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>𝄞</text></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,700;0,9..144,900;1,9..144,600&family=Space+Grotesk:wght@400;500;700&family=Noto+Serif+SC:wght@700;900&display=swap" rel="stylesheet">
<style>
:root{
  color-scheme:dark;
  --ink:#0e161d; --ink2:#131e27; --panel:#18242f; --panel2:#1d2b37; --line:#2b3b48;
  --paper:#f8f2e2; --paper2:#efe5cc; --staffink:#4a4234; --noteink:#26211a;
  --brass:#d9a441; --brass2:#f0c46c; --verm:#e4572e; --teal:#5cb3a4;
  --text:#e9e3d3; --muted:#8fa0ab;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Space Grotesk','PingFang SC','Microsoft YaHei',sans-serif;
  color:var(--text); min-height:100vh; user-select:none;
  background:
    radial-gradient(900px 480px at 82% -8%, rgba(217,164,65,.10), transparent 62%),
    radial-gradient(700px 500px at -10% 110%, rgba(92,179,164,.07), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(255,255,255,.020) 34px 35px),
    linear-gradient(178deg,#15212b 0%, #0e161d 55%, #0b1218 100%);
  background-attachment:fixed;
}
input,select,textarea{user-select:text}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#33455388;border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

/* ── 漂浮音符背景 ── */
.bgnotes{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bgnotes span{position:absolute;color:var(--brass);opacity:.05;filter:blur(1px);
  animation:drift 26s ease-in-out infinite alternate}
.bgnotes span:nth-child(1){font-size:11rem;left:4%;top:58%;animation-duration:31s}
.bgnotes span:nth-child(2){font-size:7rem;left:88%;top:12%;animation-duration:23s;animation-delay:-8s}
.bgnotes span:nth-child(3){font-size:15rem;left:70%;top:62%;animation-duration:38s;animation-delay:-15s;color:var(--teal)}
.bgnotes span:nth-child(4){font-size:5rem;left:38%;top:6%;animation-duration:19s;animation-delay:-4s}
.bgnotes span:nth-child(5){font-size:9rem;left:16%;top:16%;animation-duration:29s;animation-delay:-11s;color:var(--verm)}
@keyframes drift{from{transform:translateY(0) rotate(-8deg)}to{transform:translateY(-46px) rotate(9deg)}}

/* ── 顶栏 ── */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:12px 22px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#1a2732f2,#131e27f2);backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--brass2),var(--brass) 60%,#b07f26);
  box-shadow:0 4px 14px -4px #d9a44188, inset 0 1px 0 #ffe9b8; transition:transform .3s}
.brand:hover .mark{transform:rotate(-8deg) scale(1.06)}
.brand h1{font-family:'Noto Serif SC',serif;font-weight:900;font-size:25px;letter-spacing:.06em;line-height:1}
.brand small{display:block;font-family:'Space Grotesk';font-size:9.5px;font-weight:700;letter-spacing:.34em;color:var(--brass);margin-top:3px}
.transport{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.play{width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;color:#241a06;
  background:linear-gradient(145deg,var(--brass2),var(--brass) 55%,#b8862b);
  box-shadow:0 6px 18px -6px #d9a441aa, inset 0 1px 0 #ffedc0;
  display:grid;place-items:center;transition:transform .15s, box-shadow .2s}
.play:hover{transform:scale(1.09);box-shadow:0 8px 24px -6px #d9a441dd}
.play:active{transform:scale(.96)}
.play svg{width:22px;height:22px;fill:currentColor}
.tbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);cursor:pointer;
  background:var(--panel);color:var(--muted);display:grid;place-items:center;transition:.18s}
.tbtn:hover{color:var(--text);border-color:#3d5264;transform:translateY(-2px)}
.tbtn.on{color:var(--brass2);border-color:var(--brass);box-shadow:0 0 12px -3px #d9a44177}
.tbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tbtn.fill svg{fill:currentColor;stroke:none}
.bpm,.vol{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:7px 12px}
.bpm .lbl,.vol .lbl{font-size:10px;letter-spacing:.2em;color:var(--muted);font-weight:700}
.bpm b{font-family:'Fraunces',serif;font-weight:900;font-size:19px;color:var(--brass2);min-width:36px;text-align:right}
.bpm i{font-style:normal;font-size:9px;letter-spacing:.14em;color:var(--muted)}
input[type=range]{accent-color:var(--brass);cursor:pointer}
.bpm input{width:110px}.vol input{width:76px}
.vol svg{width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.actions{display:flex;align-items:center;gap:9px;margin-left:auto;flex-wrap:wrap}
.abtn{border:1px solid var(--line);background:var(--panel);color:.........完整代码请登录后点击上方下载按钮下载查看