js+css在线五线谱曲谱可视化设计试听导出midi和pdf曲谱代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：js+css在线五线谱曲谱可视化设计试听导出midi和pdf曲谱代码

代码标签： js css 在线五线谱曲谱可视化设计试听导出 midi pdf 代码

下面为部分代码预览，完整代码请点击下载或在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>在线作曲工作台 - 可视化五线谱创作</title>

<script src="https://unpkg.com/vexflow@4.2.2/build/cjs/vexflow.js"></script>
<script src="https://unpkg.com/tone@14.8.49/build/Tone.js"></script>
<script src="https://unpkg.com/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>

<style>
:root{
  --accent:#e0a53c;
  --accent2:#3ca7e0;
  --bg-dark:#1e2430;
  --bg-dark2:#262e3d;
  --bg-panel:#2c3648;
  --text-light:#e8ecf1;
  --border:#3a4457;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;background:#12161f;color:var(--text-light);}
button{
  cursor:pointer;border:none;border-radius:6px;padding:7px 13px;font-size:13px;
  background:var(--bg-panel);color:var(--text-light);border:1px solid var(--border);
  transition:.15s;
}
button:hover{background:#3a4560;}
button:active{transform:scale(0.97);}
button.primary{background:linear-gradient(180deg,var(--accent),#c07f1e);color:#241a06;font-weight:bold;border:none;}
button.primary:hover{filter:brightness(1.08);}
button.accent2{background:linear-gradient(180deg,var(--accent2),#1c76a8);color:#04202e;font-weight:bold;border:none;}
button.danger{background:#5a2d33;color:#ffd9db;}
button.active-btn{background:var(--accent);color:#241a06;font-weight:bold;border-color:var(--accent);}
input, select{
  background:#1a2029;color:var(--text-light);border:1px solid var(--border);
  border-radius:5px;padding:5px 8px;font-size:13px;
}
input[type=range]{padding:0;}
label{font-size:12px;color:#aab4c6;display:block;margin-bottom:2px;}

/* ---------- 整体布局 ---------- */
#app{display:flex;flex-direction:column;height:100vh;}
#topbar{
  background:var(--bg-dark2);border-bottom:1px solid var(--border);
  padding:8px 14px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;
}
#topbar h1{font-size:16px;margin:0 16px 0 0;color:var(--accent);white-space:nowrap;font-weight:700;}
.field{display:flex;flex-direction:column;}
#toolbar2{
  background:var(--bg-dark);border-bottom:1px solid var(--border);
  padding:8px 14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
#toolbar2 .sep{width:1px;height:22px;background:var(--border);margin:0 4px;}

#main{flex:1;display:flex;overflow:hidden;}
#sidebar{
  width:330px;flex-shrink:0;background:var(--bg-dark2);border-right:1px solid var(--border);
  padding:14px;overflow-y:auto;
}
#sidebar h3{font-size:13px;color:var(--accent);margin:14px 0 8px;border-bottom:1px solid var(--border);padding-bottom:4px;}
#sidebar h3:first-child{margin-top:0;}

#scoreWrap{flex:1;overflow:auto;background:#0c0e13;padding:30px;display:flex;flex-direction:column;align-items:center;}
.sheet-page{
  background:#fdfdfa;box-shadow:0 6px 24px rgba(0,0,0,0.55);margin-bottom:26px;flex-shrink:0;
  border-radius:2px;
}
.sheet-page svg{display:block;}

#statusbar{
  background:var(--bg-dark2);border-top:1px solid var(--border);padding:6px 14px;
  font-size:12px;color:#9fb0c8;display:flex;justify-content:space-between;
}

/* ---------- 钢琴键盘 ---------- */
#pianoWrap{overflow-x:auto;padding-bottom:6px;}
#piano{position:relative;height:110px;margin:0 auto;}
.white-key{
  position:absolute;top:0;width:40px;height:110px;background:linear-gradient(#fff,#f0f0ee);
  border:1px solid #888;border-radius:0 0 4px 4px;box-sizing:border-box;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;
}
.white-key span{font-size:10px;color:#777;pointer-events:none;}
.white-key:hover{background:linear-gradient(#fff,#e2eefc);}
.white-key.selected{background:linear-gradient(#ffe4a8,#f4c76a);}
.black-key{
  position:absolute;top:0;width:26px;height:68px;background:linear-gradient(#333,#000);
  border-radius:0 0 3px 3px;z-index:2;border:1px solid #000;
}
.black-key:hover{background:linear-gradient(#555,#222);}
.black-key.selected{background:linear-gradient(#e0a53c,#a97417);}

#selectedPitches{
  min-height:30px;background:#1a2029;border:1px dashed var(--border);border-radius:6px;
  padding:6px;margin-top:8px;display:flex;flex-wrap:wrap;gap:5px;font-size:12px;
}
.chip{background:var(--accent);color:#241a06;padding:2px 8px;border-.........完整代码请登录后点击上方下载按钮下载查看