Music Notation Test

The goal is to be able to create a code block like this...

1```abc
2X:1
3T:Twelve Tone Idea
4C:Ken Feliciano
5S:Copyright 2019 - KoaMuse
6M:4/4
7L:1/8
8K:C
9G3 (F F) (_B B2)|c _d3 A3 (E|E2) D ^F3 (^D2|^D) (B B3) (_A A2)||
10```

and have it render as music notation.

Trying React Sheet Music again

I found a CodeSandbox that is doing what I want! It runs too unlike when I tried it locally. Now to make it work. It works! I took some of the ideas in the CodeSandbox, Preview.js specifically, and applied them to how things work in Gatsby. It even allows me to make changes in markdown and see the update!

Code.js snippet

1if (langType === 'abc') {
2    return <Music>{codeString}</Music>
3}

And the Music component will get updated to handle things like playback and dark mode.

Music.js

1import * as React from 'react'
2import { useContext } from 'react'
3import { ThemeContext } from '../components'
4import SheetMusic from '@slnsw/react-sheet-music'
5
6export const Music = ({ children }) => {
7  const { theme } = useContext(ThemeContext)
8
9  return <SheetMusic notation={children} />
10}

For styling, it might look best to just be light mode like paper sheet music, but for now, it is respecting both light and dark modes with the following added to the global styles.

App.js snippet

1.sheet-music {
2  background-color: var(--surface);
3}
4
5.sheet-music svg,
6.sheet-music path {
7  fill: currentColor;
8}

Using renderAbc() alone

It works as a TextBlock but it is ugly in the source and it seems rather inflexible. I'd like to use a code block and have it detect the abc language and render it out. Something along the line of the pre: handling.

renderAbc() is very fragile from a development standpoint. It does not handle hot reloading so you have to refresh the page after you make any change. The notation goes away.

Also, when you browse away from the page, and come back to it, the notation is gone as well.

Using React Sheet Music

React Sheet Music looked promising but it was also a failure. The documentation wasn't correct on how to invoke it. There is an issue from Dec 2021 that is the same as what I'm getting. All of these libraries are forsook :) I know the feeling.

My logging system in Obsidian Creating a Code System for Gatsby