初始化

wwf

2025-05-20 938c3e5a587ce950a94964ea509b9e7f8834dfae

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import abcjs from 'abcjs'
import { useEffect, useRef } from 'react'
import 'abcjs/abcjs-audio.css'
 
const MarkdownMusic = ({ children }: { children: React.ReactNode }) => {
  const containerRef = useRef<HTMLDivElement>(null)
  const controlsRef = useRef<HTMLDivElement>(null)
 
  useEffect(() => {
    if (containerRef.current && controlsRef.current) {
      if (typeof children === 'string') {
        const visualObjs = abcjs.renderAbc(containerRef.current, children, {
          add_classes: true, // Add classes to SVG elements for cursor tracking
          responsive: 'resize', // Make notation responsive
        })
        const synthControl = new abcjs.synth.SynthController()
        synthControl.load(controlsRef.current, {}, { displayPlay: true })
        const synth = new abcjs.synth.CreateSynth()
        const visualObj = visualObjs[0]
        synth.init({ visualObj }).then(() => {
          synthControl.setTune(visualObj, false)
        })
        containerRef.current.style.overflow = 'auto'
      }
    }
  }, [children])
 
  return (
    <div style={{ minWidth: '100%', overflow: 'auto' }}>
      <div ref={containerRef} />
      <div ref={controlsRef} />
    </div>
  )
}
MarkdownMusic.displayName = 'MarkdownMusic'
 
export default MarkdownMusic