Document/require 'onLoad' prop for sampler type Instrument

First off, I wanted to say thank you for building out this awesome library! I stumbled upon ToneJS first and figured I was going to have to build out similar abstractions for interacting with that API in React, so I’m thankful that most of the heavy lifting has been done here already.

One issue that I just spent a lot of time trying to debug was why a song with a track and sampler instrument would throw errors as soon as it attempted to play a note. I had sent through a samples prop with notes and file URLs in the structure shown in the docs…

<Instrument 
    samples={{
        "C-2": "...",
        "C#-2": "...",
    }}
    type="sampler" />

Any time I change isPlaying to true for the <Song />, it would throw this error:

Uncaught Error: No available buffers for note: -12
    at s.default.Sampler._findClosest (Tone.js:7)
    at s.default.Sampler.triggerAttack (Tone.js:7)
    at s.default.Sampler.triggerAttackRelease (Tone.js:7)
    at Track.tsx:95
    at Array.map (<anonymous>)
    at Track.tsx:94
    at Array.forEach (<anonymous>)
    at s.default.Sequence.callback (Track.tsx:93)
    at s.default.Sequence.s.default.Part._tick (Tone.js:7)
    at s.default.Event._tick (Tone.js:7)
    at s.default.TransportRepeatEvent.s.default.TransportEvent.invoke (Tone.js:7)
    at s.default.TransportRepeatEvent.invoke (Tone.js:7)
    at s.default.TransportEvent.invoke (Tone.js:7)
    at s.default.Timeline.<anonymous> (Tone.js:7)
    at s.default.Timeline.<anonymous> (Tone.js:7)
    at s.default.Timeline.<anonymous> (Tone.js:7)
    at Array.forEach (<anonymous>)
    at s.default.Timeline._iterate (Tone.js:7)
    at s.default.Timeline.forEachAtTime (Tone.js:7)
    at s.default.Transport._processTick (Tone.js:7)
    at s.default.Clock.<anonymous> (Tone.js:7)
    at s.default.TickSource.forEachTickBetween (Tone.js:7)
    at s.default.Clock._loop (Tone.js:7)
    at s.default.Context.s.default.Emitter.emit (Tone.js:7)

After some more trial and error, I realized from the network tab in dev tools that samples weren’t actually being loaded. Once the onLoad function was provided, network requests were firing off to load the resources and then it would play as expected.

At the very least, there should be a JSDoc comment that notes this function is required when providing type="sampler". It would be even better if we could use conditional types to require this property when type is passed through as "sampler".

[unkleho]

Thanks so much for that, I see the issue now. I’ve added onLoad as a condition for when new samples get added after initial render. https://github.com/unkleho/reactronica/blob/v0.6.0/src/components/Instrument.tsx#L307

I’ll have a fix for it soon!

[unkleho]

BTW, I’ve just published v0.6.0, fixing the build problem and typing issues.