Tone.js 用户设置参数

如何解决Tone.js 用户设置参数

我试图让用户最终选择他们想要使用的音符，但首先为了测试这个功能，我绘制了几个按钮，点击时应该播放所需的音符。

以下代码段是 Tone.js 通常的工作方式。 synth.triggerAttackRelease("C5","8n")

以下代码段表达了我希望它如何工作。 synth.triggerAttackRelease(btnId,"8n")

即使 btnId 作为相应的注释返回，例如“A4”，我也收到以下错误。 Uncaught Error: Invalid argument(s) to setValueAtTime: "A",0.1 在这种情况下，A 是注释。

这是一个完整的代码块，例如一个工作函数

   import * as Tone from 'tone'
   import {Notes} from './Notes.js';
   const synth = new Tone.Synth().toDestination();
   
   export default Class Synthdisplay extends React.Component {
      constructor(props) {
         super(props);
         this.btnClick = this.BtnClick.bind(this);
      }
      btnClick () {
         synth.triggerAttackRelease("C5","8n");
      }
      render(){
         return(
           <button onClick={btnClick} />
          )
      }
   }

这是我想要工作的代码

import React from 'react';


export default class SpinDial extends React.Component {
    constructor(props) {
        super(props);
        this.state = {Notes: props.Notes,Tone: props.Tone,array: []};
        this.renderNotes = this.renderNotes.bind(this);
        this.btnPress = this.btnPress.bind(this);
    }
    componentDidMount() {
        this.renderNotes();
    }
    renderNotes () {
        const notes = this.state.Notes;
        const array = this.state.array;
        for (let i = 0; i < notes.length; i ++) {
            array.push(<button className="noteBtn" key={notes[i] + i} id={notes[i]} onClick={this.btnPress}>{notes[i]}</button>);
        }
        const mapArray = array.map((object,index) => {
            return <div className={"mapDiv"} key={index} value={object.id}>{[object]}</div>
        });
        this.setState({
            array: mapArray
        });
    }
    btnPress (e) {
        const btnId = e.target.id;
        const noteBtnArray = document.getElementsByClassName("noteBtn");
        for (let i = 0; i < noteBtnArray.length; i++) {
            if (noteBtnArray[i].id === btnId) {
                console.log("Match" + noteBtnArray[i] + " " + btnId);
                const synth = new this.state.Tone.Synth().toDestination();
                synth.triggerAttackRelease(btnId,"8n");

            } else {
                console.log("Fail" + noteBtnArray[i] + " " + btnId);
            }
        }

    }
    render() {
        return(
            <div>{this.state.array}</div>
            
        )
    }
}

解决方法

所以我意识到我在 Notes.js 文件中的一些注释（例如 D# 和 E#）并不是它们在文档中实际列出的方式。只要注释与文档匹配，上面的代码应该可以工作。