abcjsを使ってみた

できたこと

最低限だけど、楽譜の表示ができるところまで実装した。

やったこと

abcjs をインストール

$ npm install --save abcjs

楽譜表示用コンポーネントを作成

import abcjs from 'abcjs'
import React, { useEffect } from 'react'

const MusicScore = ({ code }) => {
  useEffect(() => {
    abcjs.renderAbc('musicNotation', code)
  })
  return <div id="musicNotation"></div>
}

export default MusicScore

jsconfig.json の compilerOptions に "jsx": "react", の記述を追加

{
  "compilerOptions": {
    "jsx": "react", // この行を追加
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/data/*": ["data/*"],
      "@/layouts/*": ["layouts/*"],
      "@/lib/*": ["lib/*"],
      "@/css/*": ["css/*"]
    }
  }
}

mdx ファイルを作成し、はじめに MusicScore コンポーネントを import した上で記事を執筆

import MusicScore from '@/components/MusicScore'

これで楽譜が表示される。
<MusicScore
code={`K:C
CDEF`}
/>