abcjs实现渲染五线谱曲谱和播放曲谱示例代码
代码语言:html
所属分类:多媒体
代码描述:abcjs实现渲染五线谱曲谱和播放曲谱示例代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title>ABCJS 五线谱渲染与播放 · 演示</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;600&display=swap" rel="stylesheet"> <!-- ABCJS (含渲染与音频) --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/abcjs-basic-min.js"></script> <style> :root{ --bg:#0f1221; --card:#14182a; --muted:#b8c1d8; --text:#eaf0ff; --brand:#6c8cff; --brand-2:#9f7aea; --ok:#2ecc71; --warn:#ffb200; --err:#ff6b6b; --border:rgba(255,255,255,0.08); --shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.03); } *{ box-sizing: border-box; } html,body{ height:100%; } body{ margin:0; font-family:"Inter","Noto Sans SC",system-ui,-apple-system,Segoe UI,Roboto,Arial; background: radial-gradient(1200px 600px at 10% -20%, rgba(108,140,255,0.25), transparent 50%), radial-gradient(900px 500px at 90% -10%, rgba(159,122,234,0.25), transparent 50%), linear-gradient(180deg, #0a0d1a, #0f1221 40%, #0f1221); color:var(--text); } .wrap{ max-width: 1080px; margin: 36px auto 84px; padding: 0 18px; } header{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px;} .brand{ display:flex; align-items:center; gap:12px;} .logo{ width:48px;height:48px;border-radius:12px; background: conic-gradient(from 220deg,var(--brand),var(--brand-2),var(--brand)); box-shadow: var(--shadow); } h1{ margin:0; font-size: 28px; letter-spacing:.2px.........完整代码请登录后点击上方下载按钮下载查看
网友评论0