|
- import * as React from 'react';
- import * as Vexflow from 'vexflow';
-
- export const Notation = () => {
- const ref = React.useRef<HTMLElementTagNameMap['div']>(null);
- const id = React.useId();
-
- React.useEffect(() => {
- const render = (id: string) => {
- const el = window.document.getElementById(id);
- if (!el) {
- return;
- }
-
- el.innerHTML = '';
- const { Factory } = Vexflow;
- const width = el.clientWidth;
- const vf = new Factory({
- renderer: { elementId: id, width, height: 300 },
- });
-
- vf.getContext().scale(0.75, 0.75);
-
- const score = vf.EasyScore();
- let currentX = 20;
- let currentY = 40;
-
- const getCurrentBar = (width: number) => {
- const system = vf.System({
- x: currentX,
- y: currentY,
- width,
- });
- currentX += width;
- return system;
- };
-
- let system = getCurrentBar(130);
- system.addStave({
- voices: [
- score.voice([
- ...score.notes('D5/8'),
- ], {
- time: '1/8',
- })
- ]
- })
- .addClef('treble')
- .addKeySignature('Gm')
- .addTimeSignature('C')
- .setTempo(
- {
- name: 'Adagio.'
- },
- -30
- );
-
- system.addStave({
- voices: [
- score.voice([
- ...score.notes('D3/8/r', { clef: 'bass' }),
- ], {
- time: '1/8',
- })
- ]
- })
- .addClef('bass')
- .addKeySignature('Gm')
- .addTimeSignature('C');
-
- system.addConnector('brace');
- system.addConnector('singleLeft');
- system.addConnector('singleRight');
-
- system = getCurrentBar(350);
-
- system
- .addStave({
- voices: [
- score.voice(
- [
- ...score.tuplet(
- score.beam(
- score.notes('G5/16, B5, A5, G5, F#5, G5'),
- ),
- {
- ratioed: false,
- notesOccupied: 4,
- }
- ),
- ...score.tuplet(
- score.beam(
- score.notes('G5/16, F5, G5, D6, F5, G5'),
- ),
- {
- ratioed: false,
- notesOccupied: 4,
- yOffset: Infinity,
- }
- ),
- // ...score.beam(score.notes('E5/8, D5')),
- ...score.beam(score.notes('E5/8, D5')),
- ...score.tuplet(
- score.beam(
- score.notes('D5/16, E5, F5, G5, A5, B5'),
- ),
- {
- ratioed: false,
- notesOccupied: 4,
- yOffset: Infinity,
- }
- ),
- ]
- ),
- ]
- });
-
- system
- .addStave({
- voices: [
- score.voice([
- ...score.beam(
- score.notes('(G3 B3 D4)/8, (G3 B3 D4)', { clef: 'bass' })
- ),
- ...score.beam(
- score.notes('(G3 B3 D4)/8, (G3 B3 D4)', { clef: 'bass' })
- ),
- ...score.beam(
- score.notes('(G3 C4)/8, (G3 B3)', { clef: 'bass' })
- ),
- ...score.beam(
- score.notes('(G3 B3)/8, (G3 B3)', { clef: 'bass' })
- ),
- ]),
- ]
- });
-
- system.addConnector('singleLeft');
- system.addConnector('singleRight');
-
- vf.draw();
- };
-
- render(id);
- }, []);
-
- return (
- <div
- ref={ref}
- id={id}
- />
- );
- };
|