tonejs

What is the proper way to set BPM in Tone.js


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;

Solution

  • 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