Before all, all credits goes to [@ryohey](https://github.com/ryohey) for his [wavelet](https://github.com/ryohey/wavelet library that I used to create this hook. You should check his work on [Signal](https://github.com/ryohey/signal), it's really cool.
npm install @maximethizeau/use-midi-playerBefore all, all credits goes to @ryohey for his wavelet, it's really cool.
This hook allow you to play midi files in your react app. It use the midifile-ts library to parse the midi file and wavelet to play it.
``bashFirst, add the peer dependencies
npm install midifile-ts @ryohey/waveletAnd install this library
npm install @maximethizeau/use-midi-player
Usage
You can use one of the following methods to play a midi file:
- useSingleMidiPlayer hook
tsx
const LoadByHook: React.FC = () => {
const { synth } = useMidiPlayer({
url: 'Numb.mid',
})
return (
<>
)
}
`- useMidiPlayerContext hook
tsx
const LoadByContext: React.FC = () => {
const { synth } = useMidiPlayerContext() useEffect(() => {
if (!synth) return
synth?.load('Numb.mid')
}, [synth])
return (
<>
)
}
const App: React.FC = () => {
return (
)
}
`- MidiPlayerExample component
tsx
const App: React.FC = () => {
// Simple component that allow you to upload a midi file and play it
return
}
``