abcjs实现渲染五线谱曲谱和播放曲谱示例代码

代码语言:html

所属分类:多媒体

代码描述:abcjs实现渲染五线谱曲谱和播放曲谱示例代码

代码标签: abc 渲染 五线谱 曲谱 播放 示例 代码

下面为部分代码预览,完整代码请点击下载或在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 Sa.........完整代码请登录后点击上方下载按钮下载查看

网友评论0