Sampler.onload not fired and .loaded == false despite actually being loaded (mobile web specifically)
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
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 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.