Tonejs Transport error in pausing while songs are playing

[ParamjeetDahiya]

So I'm trying to make a simple Digital audio workstation(D.A.W) kind of thing in react. To solve this problem I'm using Tonejs Transport to play and sync multiple songs on Transport timeline and is working fine but problem arises when i try to pause it. Eventually it pauses when i click to pause but also it crashes the application saying Error: buffer is either not set or not loaded

I tried to do something like this but this didn't solve the problem.

Tone.Buffer.on('load', () => { if (this.props.play) Tone.Transport.start() if (!this.props.play) Tone.Transport.stop() })

This is where I'm setting the player

Player = (src, startTime,volume) => {

Tone.Transport.bpm.value = 108;
Tone.Transport.loop = false;
let buff = new Tone.Buffer({
  "url": `/MP3s/${src}`,

});
let play = new Tone.Player(buff).toMaster().sync().start(startTime)

Tone.Buffer.on('load', () => {

  if (this.props.play)
  Tone.Transport.start()
  if (!this.props.play) 
    Tone.Transport.stop()

}) }

It's showing error on the let play line in code and i just couldn't figure out on my own about the reason of problem and how to resolve it. Also I'm playing these files from the public folder of my react app.

[tambien]

i'm unable to verify this error. is it possible to create a minimal test case or send a link of live code which includes the error?

[ParamjeetDahiya]

Hi tambien, i,m sharing my repository link. You can check this out. https://github.com/ParamjeetDahiya/music-app.

[tambien]

@ParamjeetDahiya, Unable to verify this issues since there's still quite a bit of code to get up and running and parse through. It'd make it much easier to debug if you could point me at a minimal example of this running in jsfiddle or similar live environment. that way we can debug just the Tone.js code.

[ParamjeetDahiya]

Hello @tambien , I can't send you the minimal version because minimal version is working fine. It's the issue with react. Whenever the state change in react it doesn't affect tonejs part, that's why it's showing buffer is empty. I don't know why buffer is empty after re-rendering. Can you tell me how to work on tonejs with react.