「VexFlow」の版間の差分

2022年12月9日 (金) 17:39時点における版

　MathJaxの楽譜版みたいな。MathJax？な人もいますから説明しますと、Webサイトにおいてネットワーク越しに準備されているJavaScriptライブラリを使って、自分のWebサイトで楽譜を描画する仕組みです。楽しい。

<script src="https://cdn.jsdelivr.net/npm/vexflow@4.0.3/build/cjs/vexflow.js"></script>
<script>
  // ここにあなたのコードを書く。
</script>

@@ 11行目: / 11行目: @@
 </script>
 </syntaxhighlight>
+<yjavascript>
+<script src="https://cdn.jsdelivr.net/npm/vexflow@4.0.3/build/cjs/vexflow.js"></script>
+<script>
+const { Factory, EasyScore, System } = Vex.Flow;
+const vf = new Factory({
+  renderer: { elementId: 'output', width: 500, height: 200 },
+});
+const score = vf.EasyScore();
+const system = vf.System();
+system
+  .addStave({
+    voices: [
+      score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),
+      score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),
+    ],
+  })
+  .addClef('treble')
+  .addTimeSignature('4/4');
+vf.draw();
+</script>
+</yjavascript>