如何在Tone.js v14中正确设置初始BPM？

核心问题 #

你代码里存在两处关键问题：

1. 拼写错误：把Tone.Transport.bpm误写为Tone.Transport.bmp，这是设置不生效的直接原因；
2. 属性操作错误：Tone.js v14 中Transport.bpm是Param对象，必须通过它的value属性赋值，直接赋值无法生效。

正确设置固定BPM的方法 #

将错误的代码行：

Tone.Transport.bmp = 50;

替换为：

Tone.Transport.bpm.value = 50;

这样Transport启动时会直接以目标BPM运行，完全没有渐变效果，符合你的需求。

关于Transport实例的说明 #

Tone.js v14 已移除Transport构造器，现在它是全局单例模式，直接使用Tone.Transport即可，无需也不能通过new Tone.Transport()创建自定义实例。

修改后的完整代码 #

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()

            new Tone.Loop(time => {
                kick.start(time)
            }, "4n").start(0)

            new Tone.Loop(time => {
                snare.start(time)
            }, "4n").start("8n")

            setSetup(true)
        }
    
        // 修正拼写并正确设置BPM
        Tone.Transport.bpm.value = 50;
        Tone.Transport.start()
    }

    return (
            <div className="App">
                <header className="App-header">
                    <button onClick={goHandler}>{playing ? "STOP" : "PLAY"}</button>
                </header>
            </div>
    );
}

export default App;

额外提示 #

• 后续动态切换BPM时，同样使用Tone.Transport.bpm.value = 目标速度即可，无需使用rampTo（仅在需要渐变时使用该方法）；
• 建议在调用Tone.Transport.start()前完成BPM设置，确保播放初始就使用目标速度。

内容的提问来源于stack exchange，提问作者Roger Heathcote