An Audio Worklet-based SoundFont2 synthesizer for the browser.
npm install sf2-synth-audio-worklet
This code sets up a simple SoundFont2 player in React using the library.
import { useState } from 'react'
import {
createSoundFont2SynthNode,
type SoundFont2SynthNode,
} from 'sf2-synth-audio-worklet'
function App() {
const [node, setNode] = useState<SoundFont2SynthNode>()
const setup = async () => {
const audioContext = new AudioContext()
const sf2Url = 'path/to/soundfont2' // Replace with the SoundFont2 file path
const node = await createSoundFont2SynthNode(audioContext, sf2Url)
node.connect(audioContext.destination)
setNode(node)
}
const noteOn = () => node?.noteOn(0, 60, 100, 0)
const noteOff = () => node?.noteOff(0, 60, 0)
return (
<div>
<button onClick={setup} disabled={!!node}>
Setup
</button>
<button onMouseDown={noteOn} onMouseUp={noteOff} disabled={!node}>
Sound
</button>
</div>
)
}
MIT