我试图让用户最终选择他们想要使用的音符，但首先为了测试这个功能，我绘制了几个按钮，当点击时应该播放所需的音符。
以下代码段是 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>
)
}
}