「VexFlow」の版間の差分
編集の要約なし |
編集の要約なし |
||
| 1行目: | 1行目: | ||
== '''概要''' == | == '''概要''' == | ||
MathJaxの楽譜版みたいな。MathJax？な人もいますから説明しますと、Webサイトにおいてネットワーク越しに準備されているJavaScriptライブラリを使って、自分のWebサイトで楽譜を描画する仕組みです。楽しい。 | MathJaxの楽譜版みたいな。MathJax？な人もいますから説明しますと、Webサイトにおいてネットワーク越しに準備されているJavaScriptライブラリを使って、自分のWebサイトで楽譜を描画する仕組みです。楽しい。 | ||
| 20行目: | 16行目: | ||
<yjavascript> | <yjavascript> | ||
</script> | |||
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.0.3/build/cjs/vexflow.js"></script> | |||
const { Factory, EasyScore, System } = Vex.Flow; | const { Factory, EasyScore, System } = Vex.Flow; | ||
2022年12月9日 (金) 18:36時点における版
概要
MathJaxの楽譜版みたいな。MathJax？な人もいますから説明しますと、Webサイトにおいてネットワーク越しに準備されているJavaScriptライブラリを使って、自分のWebサイトで楽譜を描画する仕組みです。楽しい。
簡単な使い方
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.0.3/build/cjs/vexflow.js"></script>
<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();