Tone.js icon indicating copy to clipboard operation
Tone.js copied to clipboard

Sampler.onload not fired and .loaded == false despite actually being loaded (mobile web specifically)

Open bryceAebi opened this issue 3 years ago • 3 comments

Describe the bug

The onload function is not called and the sampler.loaded value is false despite the sampler having successfully loaded all of the files. The code below works just fine on Chrome/Safari Desktop and iPhone Safari via Simulator. But when trying to run it on an actual iPhone in Safari OR Chrome, the onload is never called and .loaded is false (and it continues to print false even when I use the sampler successfully in later code)

To Reproduce

The following is some edited React code where I am experiencing this issue

export const SamplerContextProvider: React.FC<Props> = ({ children }) => {
  const [isLoaded, setIsLoaded] = useState(false)
  const [pianoSampler, setPianoSampler] = useState<Tone.Sampler>(
    new Tone.Sampler(),
  )

  useEffect(() => {
    const pianoSampler = new Tone.Sampler({
      urls: {
        A0: 'A0v10.mp3',
      },
      release: 1,
      baseUrl: process.env.PUBLIC_URL + '/audio/',
      onload: () => {
        console.log('audio is loaded') // NOT BEING PRINTED ON MOBILE WEB
        setIsLoaded(true)
      },
    }).toDestination()

    // Adding this as a test -- onload isn't being fired on safari mobile even
    // though the files are loaded properly. Maybe the solution is directly checking
    // pianoSampler.loaded
    if (pianoSampler.loaded) {
      console.log('pianoSampler.loaded is true') // NOT BEING PRINTED ON MOBILE WEB
      setIsLoaded(true)
    }
    setPianoSampler(pianoSampler)
  }, [])

Expected behavior I would expect onload to be called, or at least .loaded should be true.

Thank you

bryceAebi avatar Sep 21 '22 01:09 bryceAebi

It's definitely working for me using 14.8.49. An easy mistake I made recently was a misconfigured production build having the wrong URL. My initial test on Chrome "passed" because the app was cached. I'd upgrade Tone and inspect the console.

mrclay avatar Feb 13 '23 14:02 mrclay

@mrclay which version are you using? And could you clarify what exactly is working for you (device/browser)? The latest I see published is 14.7.77, which I'm on.

I did inspect the console by connecting my phone to my dev computer and piping out the logs, hence the console.log statements in my above code snippet.

bryceAebi avatar Feb 24 '23 00:02 bryceAebi

Ah, I guess I'm on the next tag. 14.8.49. My app seems to work fine in Chrome (linux, mac) and Safari iOS. Here's where I rely on onload.

mrclay avatar Feb 24 '23 16:02 mrclay