Tone.js用户集参数

Question

我试图让用户最终选择他们想要使用的注释，但是首先为了测试这个特性，我列出了几个按钮，在单击时应该播放所需的注释。

下面的片段是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>
            
        )
    }
}

Answer 1

因此，我意识到，我在E#文件中的一些注释(如E#和Notes.js文件)并不是如何在文档中列出的。只要注释与文档相匹配，上述代码就可以工作。