diff --git a/packages/react/src/hooks/useWebMidi.mjs b/packages/react/src/hooks/useWebMidi.mjs index ee3f0db3..64758229 100644 --- a/packages/react/src/hooks/useWebMidi.mjs +++ b/packages/react/src/hooks/useWebMidi.mjs @@ -5,36 +5,43 @@ This program is free software: you can redistribute it and/or modify it under th */ import { useEffect, useState } from 'react'; -import { enableWebMidi, WebMidi } from '@strudel.cycles/midi' +import { enableWebMidi, WebMidi } from '@strudel.cycles/midi'; export function useWebMidi(props) { const { ready, connected, disconnected } = props; const [loading, setLoading] = useState(true); const [outputs, setOutputs] = useState(WebMidi?.outputs || []); useEffect(() => { - enableWebMidi() - .then(() => { - // Reacting when a new device becomes available - WebMidi.addListener('connected', (e) => { - setOutputs([...WebMidi.outputs]); - connected?.(WebMidi, e); + if (typeof navigator.requestMIDIAccess === 'function') { + enableWebMidi() + .then(() => { + // Reacting when a new device becomes available + WebMidi.addListener('connected', (e) => { + setOutputs([...WebMidi.outputs]); + connected?.(WebMidi, e); + }); + // Reacting when a device becomes unavailable + WebMidi.addListener('disconnected', (e) => { + setOutputs([...WebMidi.outputs]); + disconnected?.(WebMidi, e); + }); + ready?.(WebMidi); + setLoading(false); + }) + .catch((err) => { + if (err) { + console.error(err); + //throw new Error("Web Midi could not be enabled..."); + console.warn('Web Midi could not be enabled..'); + return; + } }); - // Reacting when a device becomes unavailable - WebMidi.addListener('disconnected', (e) => { - setOutputs([...WebMidi.outputs]); - disconnected?.(WebMidi, e); - }); - ready?.(WebMidi); - setLoading(false); - }) - .catch((err) => { - if (err) { - console.error(err); - //throw new Error("Web Midi could not be enabled..."); - console.warn('Web Midi could not be enabled..'); - return; - } - }); + } else { + console.warn( + `Your Browser does not support WebMIDI. +See https://caniuse.com/?search=web%20midi%20api`, + ); + } }, [ready, connected, disconnected, outputs]); const outputByName = (name) => WebMidi.getOutputByName(name); return { loading, outputs, outputByName };