I have tried simply setting Tone.Transport.bpm
but it is ignored. My content just plays at the default 120 BPM. I then looked at some of the docs and it implies you can pass parameters to a constructor to make a Transport with custom parameters. However when I try this is tells me Transport is not a constructor
, which I guess it isn't in v14 :/
I am using v14 / Ubuntu / Version 104.0.5112.79 (Official Build) (64-bit) in the latest React.
Here is my code, it is very close to their official example code. The interesting (and confusing!) thing is un-commenting the rampTo
line does change the tempo, but over the course of 200ms. Setting this value too low causes an error and I don't want the Tempo to shift once playback is started. I want it to start at a set tempo from sample 0...
import React, {useState} from 'react'
import * as Tone from 'tone'
function App() {
const [toneStarted, setToneStarted] = useState(false)
const [playing, setPlaying] = useState(false)
const [setup, setSetup] = useState(false)
async function goHandler(event) {
if(!toneStarted) await Tone.start()
setToneStarted(true)
setPlaying(!playing)
if(playing) return Tone.Transport.stop()
if(!setup){
var kick = new Tone.Player("/samples/Kicks/003.WAV").toDestination()
var snare = new Tone.Player("/samples/Snares/003.WAV").toDestination()
await Tone.loaded()
// play a note every quarter-note
new Tone.Loop(time => {
kick.start(time)
}, "4n").start(0)
// play another note every off quarter-note, by starting it "8n"
new Tone.Loop(time => {
snare.start(time)
}, "4n").start("8n")
// Tone.Transport.bpm.rampTo(50, 0.2);
setSetup(true)
}
Tone.Transport.bmp = 50;
Tone.Transport.start()
}
return (
<div className="App">
<header className="App-header">
<button onClick={goHandler}>{playing ? "STOP" : "PLAY"}</button>
</header>
</div>
);
}
export default App;
You have to use the .value
notation at the end:
Tone.Transport.bpm.value = 50
and you got a wrong typo = bpm
instead of bmp