abcjs渲染曲谱五线谱展示播放导出midi和wav示例代码-html代码-BFW代码库

abcjs渲染曲谱五线谱展示播放导出midi和wav示例代码

代码语言：html

所属分类：多媒体

代码描述：abcjs渲染曲谱五线谱展示播放导出midi和wav示例代码

下面为部分代码预览，完整代码请点击下载或在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>abcjs 6.5.0：输入/渲染/播放/导出 MIDI & WAV（最终修复版）</title>

  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/abcjs-basic-min.js"></script>

  <style>
    body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; background:#f6f7fb; margin:0; padding:24px; display:flex; justify-content:center; }
    .wrap { width:100%; max-width: 1000px; background:#fff; border-radius:12px; padding:20px; box-shadow:0 8px 24px rgba(0,0,0,0.08); }
    h1 { margin: 0 0 16px; font-size:22px; }
    textarea { width:100%; min-height: 180px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 14px; line-height:1.5; padding:12px; border:1px solid #e3e5ea; border-radius:8px; outline: none; }
    .toolbar { margin: 12px 0 16px; display:flex; flex-wrap:wrap; gap:10px; }
    button { padding:10px 16px; border:none; border-radius:8px; color:#fff; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.06); }
    button:disabled { opacity:0.6; cursor:not-allowed; }
    .btn-render { background:#2d6cdf; }
    .btn-play   { background:#00b894; }
    .btn-stop   { background:#d63031; }
    .btn-midi   { background:#0984e3; }
    .btn-wav    { background:#6c5ce7; }
    #paper { border:1px solid #e3e5ea; border-radius:8px; padding:12px; overflow-x:auto; }
    #status { margin-top:10px; min-height: 22px; color:#555; font-style: italic; }
  </style>
</head>
<body>
  <div class="wrap">
    <h1>abcjs 6.5.0：输入曲子 → 渲染五-线谱 → 播放/停止 → 导出 MIDI/WAV</h1>

    <textarea id="abc-input">
X:1
T:The Legacy Jig
M:6/8
L:1/8
R:jig
K:G
GFG BAB|gfg d2B|cBc A2B|cde dBG|
GFG BAB|gfg d2B|cBc A2B|AGF G2:|
|:g|gfg dBG|gfg d2B|cBc A2B|cde d2g|
gfg dBG|gfg d2B|cBc A.........完整代码请登录后点击上方下载按钮下载查看