const synth = useNoteSynth({ samples: { baseUrl: 'https://cdn.example.com/soundfonts/FluidR3_GM/' } });
const [lit, setLit] = useState<number[]>([]);
useEffect(() => void synth.preload(question.sounds), [question]);
<Button onClick={() => synth.play(question.sounds)}>Hear it</Button>
<Button onClick={() => synth.playInOrder(question.sounds, 500, undefined, { onNoteStart: (i) => setLit([i]), onNoteEnd: () => setLit([]) })}>Note by note</Button>
Sound notes from a component — with recorded samples when
samplesnames a host, otherwise with the built-in voice. The audio starts on the firstplayorplayInOrder— call it from a click or a key press, as browsers only let sound start from one — and stops when the component goes, after letting a ringing note finish. Both hand back a function that stops what they started, and take a listener told as each note starts and stops sounding, in step with what is heard — to light the note being played, say.preloaddownloads samples ahead of time and may be called at any moment. Without Web Audio,playdoes nothing andsupportedisfalse. When the browser holds the sound back until the page is tapped — as iOS does with sound not started from a tap — nothing sounds or lights, andneedsGesturesays to play again from a tap.