Tonejs / Tone.js

A Web Audio framework for making interactive music in the browser.
https://tonejs.github.io
MIT License
13.37k stars 976 forks source link

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

Open bryceAebi opened 1 year ago

bryceAebi commented 1 year ago

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

mrclay commented 1 year ago

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.

bryceAebi commented 1 year ago

@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.

mrclay commented 1 year ago

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.