React buttons, With tone.Js, breaking after first key pres,Error: Invalid argument(s) to setValueAtTime: {}, 2.2188208616780045

Question

第一次按下按钮时发出提示音，我收到此错误...

错误：setValueAtTime 的参数无效：{}，2.2188208616780045

不知道这个错误是从哪里来的，我设置了每个鼠标事件的时间，所以这应该可以防止任何错误。

我的代码：

import React, { Component } from "react";

import ButtonGroup from "react-bootstrap/ButtonGroup";
import Button from "react-bootstrap/Button";

import * as Tone from "tone";

const synth = new Tone.Synth().toDestination();

//
//container component to hold the piano keys
//
class PianoBoard extends Component {

  constructor(props) {
    super(props);

    this.handleMouseDown = this.handleMouseDown.bind(this);
    this.handleMouseUp = this.handleMouseUp.bind(this);
  }

  handleMouseDown(e){
    e.preventDefault(e);
    Tone.start();
    synth.triggerAttack(e.target.attributes.note,Tone.now());
  }

  handleMouseUp(e){
    e.preventDefault(e);
    
    synth.triggerRelease(Tone.now());
  }

  render() {
    return (
      <div class="pianoboard">
        <Button onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} note="C4">
          C4
        </Button>
      </div>
    );
  }
}

export default PianoBoard;

Answer 1

错误来自您的语气属性。您应该将 note 直接传递给鼠标按下函数，而不是尝试获取事件的属性 note。

...
...
handleMouseDown(e, note){
  e.preventDefault(e);
  Tone.start();
  synth.triggerAttack(note,Tone.now());
}
...
...
<Button 
  onMouseDown={e => this.handleMouseDown(e, "C4")} 
  onMouseUp={this.handleMouseUp}
>
  C4
</Button>

React buttons, With tone.Js, breaking after first key pres,Error: Invalid argument(s) to setValueAtTime: {}, 2.2188208616780045

React buttons, With tone.Js, breaking after first key pres,Error: Invalid argument(s) to setValueAtTime: {}, 2.2188208616780045

javascript

reactjs

tone.js