Tone.js 用户设置参数答案

【问题标题】：Tone.js User set parametersTone.js 用户设置参数
【发布时间】：2021-03-11 05:19:00
【问题描述】：

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

下面的 sn-p 是 Tone.js 正常工作的方式。 synth.triggerAttackRelease("C5", "8n")

下面的 sn-p 表达了我希望它如何工作。 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>
            
        )
    }
}

【问题讨论】：

你好，你能告诉我们一些代码，它会更容易帮助你吗，谢谢
嘿，对不起。我用一些更好的例子编辑了我的原始帖子。如果您需要更多信息，请随时告诉我，谢谢。

标签： reactjs tone.js

【解决方案1】：

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

【讨论】：