谁能帮我传递这些数据？ ;)

Question

我是开发新手。当然，我正在努力解决一些基本问题。如果有人能帮助我并给出一些解释，我将不胜感激。

我正在使用 tone.js 库创建一个合成器。我了解如何通过一个“乐器”创建合成器，但我在动态执行时遇到问题，我正在给自己挖一个洞。

代码如下：

//instruments 
const synth = new Tone.Synth().toDestination();
const amSynth = new Tone.AMSynth().toDestination();
const duoSynth = new Tone.DuoSynth().toDestination();
const fmSynth = new Tone.FMSynth().toDestination();
const membraneSynth = new Tone.MembraneSynth().toDestination();
const metalSynth = new Tone.MetalSynth().toDestination();
const monoSynth = new Tone.MonoSynth({
  oscillator: {
    type: "square"
  },
  envelope: {
    attack: 0.1
  }
}).toDestination();
const noiseSynth = new Tone.NoiseSynth().toDestination();
const pluckSynth = new Tone.PluckSynth().toDestination();
const polySynth = new Tone.PolySynth().toDestination();
const sampler = new Tone.Sampler({
  urls: {
    A1: "A1.mp3",
    A2: "A2.mp3",
  },
  baseUrl: "https://tonejs.github.io/audio/casio/",
  onload: () => {
    sampler.triggerAttackRelease(["C1", "E1", "G1", "B1"], 0.5);
  }
}).toDestination();

//effects 
const distortion = new Tone.Distortion(0.4).toDestination();
const vibrato = new Tone.Vibrato(0.4).toDestination();
const pingPong = new Tone.PingPongDelay("4n", 0.2).toDestination()
const autoWah = new Tone.AutoWah(50, 6, -30).toDestination();
const cheby = new Tone.Chebyshev(50).toDestination();
const autoFilter = new Tone.AutoFilter("4n").toDestination()
const autoPanner = new Tone.AutoPanner("4n").toDestination();
const crusher = new Tone.BitCrusher(4).toDestination();
const chorus = new Tone.Chorus(4, 2.5, 0.5).toDestination();
const feedbackDelay = new Tone.FeedbackDelay("8n", 0.5).toDestination();
const freeverb = new Tone.Freeverb().toDestination();
freeverb.dampening = 1000;
const shift = new Tone.FrequencyShifter(42).toDestination();
const reverb = new Tone.JCReverb(0.4).toDestination();
const phaser = new Tone.Phaser({
  frequency: 15,
  octaves: 5,
  baseFrequency: 1000
}).toDestination();
const tremolo = new Tone.Tremolo(9, 0.75).toDestination();


//array of notes --- we add the sharps in the function 
var notes = ['C', 'D', 'E', 'F', 'G', 'A', 'B']
var html = '';

for (var octave = 0; octave < 2; octave++) {


  for (var i = 0; i < notes.length; i++) {
    var hasSharp = true;
    var note = notes[i]

    if (note == 'E' || note == 'B')
      hasSharp = false;

    //white keys with one octive
    html += `<div class='whitenote play' onmousedown='noteDown(this)' data-note='${note + (octave + 4)}'>`;

    //black keys with one octive
    if (hasSharp) {
      html += `<div class='blacknote play' onmousedown='noteDown(this)' data-note='${note + '#' + (octave + 4)}'></div>`;
    }

    html += '</div>'
  }

}
$('container').innerHTML = html;

$(".play").click(function(elem) {
  var note = elem.dataset.note;
  var synth = getSynth(elem.data("synth"));
  synth.connect(phaser);
  synth.connect(autoWah);
  synth.triggerAttackRelease(note, "16n");
  event.stopPropagation();
});


function getSynth(name) {
  switch (name) {
    case "Synth":
      return synth;
    case "AM":
      return amSynth;
    case "Duo":
      return duoSynth;
    case "FM":
      return fmSynth;
    case "Membrane":
      return membraneSynth;
    case "Metal":
      return metalSynth;
    case "Mono":
      return monoSynth;
    case "Noise":
      return noiseSynth;
    case "Pluck":
      return pluckSynth;
    case "Poly":
      return polySynth;
  }
}

#container {
  position: absolute;
  height: 200px;
  border: 2px solid black;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  display: block;
  white-space: inherit;
  overflow: hidden;
}

.whitenote {
  height: 100%;
  width: 50px;
  background: white;
  float: left;
  border-right: 1px solid black;
  position: relative;
}

.blacknote {
  position: absolute;
  height: 65%;
  width: 55%;
  z-index: 1;
  background: #777;
  left: 68%;
}

.instrument-button {
  background: orangered;
  border: none;
  color: white;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
}

.effect-button {
  background: blue;
  border: none;
  color: white;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
}

.effect-button-padding {
  padding-top: 16px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.26/Tone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.26/Tone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src='node_modules\tone\build\Tone.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.26/Tone.js.map'></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

</head>

<body style="align-items: center;">
  <div>
    <h1>Synth AF</h1>
  </div>
  <div>
    <h4>Intruments</h4>
    <button class="btn instrument-button" data-synth="Synth" id="synth-button">Synth</button>
    <button class="btn instrument-button" data-synth="AM" id="amSynth-button">AM</button>
    <button class="btn instrument-button" data-synth="Duo" id="duoSynth-button">Duo</button>
    <button class="btn instrument-button" data-synth="FM" id="fmSynth-button">FM</button>
    <button class="btn instrument-button" data-synth="Membrane" id="membraneSynth-button">Drums</button>
    <button class="btn instrument-button" data-synth="Metal" id="metalSynth-button">Metal</button>
    <button class="btn instrument-button" data-synth="Mono" id="monoSynth-button">Mono</button>
    <button class="btn instrument-button" data-synth="Noise" id="noiseSynth-button">Noise</button>
    <button class="btn instrument-button" data-synth="Pluck" id="pluckSynth-button">Plucky</button>
    <button class="btn instrument-button" data-synth="Poly" id="polySynth-button">Poly</button>
  </div>
  <div class="effect-button-padding">
    <h4>Effects</h4>
    <button class='btn effect-button' id="distortion-button">Distortion</button>
    <button class='btn effect-button' id="vibrato-button">Vibrato</button>
    <button class='btn effect-button' id="pingPong-button">PingPong</button>
    <button class='btn effect-button' id="autoWah-button">Wah</button>
    <button class='btn effect-button' id="crusher-button">BitCrusher</button>
    <button class='btn effect-button' id="phaser-button">Phaser</button>
    <button class='btn effect-button' id="reverb-button">Reverb</button>
    <button class='btn effect-button' id="autoFilter-button">Auto Filter</button>
    <button class='btn effect-button' id="feedbackDelay-button">Feedback</button>
    <button class='btn effect-button' id="cheby-button">Chebyshev</button>
  </div>
  <div class="" id="container">

  </div>
  
  </body> 
 </html>

这里是UI。（还没设计呢。。。不评价） UI Photo

我们的想法是使用在一个常量中创建的新工具之一，方法是通过单击按钮将其传递到 switch 语句，然后传递到输出。如果我没有解释清楚或使用了错误的术语，我深表歉意。

非常感谢您的帮助。

感谢您的阅读， FandopTheNoob

Answer 1

// this will be the "state" of the synthesiser
const synthSetup = {
  instrument: "",
  effects: [],
}

// this is the list of instruments
const instruments = [{
    synth: "Synth",
    id: "synth-button",
    text: "Synth",
    tone: new Tone.Synth().toDestination(),
  },
  {
    synth: "AM",
    id: "amSynth-button",
    text: "AM",
    tone: new Tone.AMSynth().toDestination(),
  },
]

// this is the list of effects
const effects = [{
    id: "distortion-button",
    text: "Distortion",
    tone: new Tone.Distortion(0.4).toDestination(),
  },
  {
    id: "vibrator-button",
    text: "Vibrato",
    tone: new Tone.Vibrato(0.4).toDestination(),
  },
]

// setting up the instruments & effects buttons
const instrumentsHtml = (instruments) => {
  return instruments.map(({
    synth,
    id,
    text
  }) => {
    return `
      <button class="btn instrument-button" data-synth=${synth} id="${id}">${text}</button>
    `
  }).join('')
}

const effectsHtml = (effects) => {
  return effects.map(({
    id,
    text
  }) => {
    return `
      <button class="btn effect-button" id="${id}">${text}</button>
    `
  }).join('')
}

const instrumentsContainer = document.getElementById("btn-group-instruments")
instrumentsContainer.innerHTML = instrumentsHtml(instruments)

const effectsContainer = document.getElementById("btn-group-effects")
effectsContainer.innerHTML = effectsHtml(effects)

// setting up click handlers on the instruments & effects buttons
$("body").on("click", ".instrument-button", function() {
  // setting up synthSetup.instrument:
  synthSetup.instrument = $(this).data("synth")
})

$("body").on("click", ".effect-button", function() {
  // setting up synthSetup.effects:
  synthSetup.effects = [...new Set([...synthSetup.effects, $(this).attr("id")])]
})

//array of notes --- we add the sharps in the function
var notes = ['C', 'D', 'E', 'F', 'G', 'A', 'B']
var html = '';

for (var octave = 0; octave < 2; octave++) {


  for (var i = 0; i < notes.length; i++) {
    var hasSharp = true;
    var note = notes[i]

    if (note == 'E' || note == 'B')
      hasSharp = false;

    //white keys with one octave
    html += `<div class='whitenote play' data-note='${note + (octave + 4)}'>`;

    //black keys with one octave
    if (hasSharp) {
      html += `<div class='blacknote play' data-note='${note + '#' + (octave + 4)}'></div>`;
    }

    html += '</div>'
  }

}
const container = document.getElementById("container")
container.innerHTML = html;

$("body").on("click", ".play", function() {
  if (!synthSetup.instrument) {
    alert("Choose an instrument first!")
  } else {
    const {
      tone: synth
    } = instruments.find(({
      synth
    }) => synth === synthSetup.instrument)
    const note = $(this).data("note")

    // connecting the effects
    synthSetup.effects.forEach(e => {
      const effect = effects.find(({
        id
      }) => e)
      synth.connect(effect.tone)
    })

    const now = Tone.now()
    synth.triggerAttackRelease(note, "2n", now)
  }
})

html,
body {
  height: 100%;
  position: relative;
}

#container {
  position: absolute;
  height: 200px;
  border: 2px solid black;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  display: block;
  white-space: inherit;
  overflow: hidden;
}

.whitenote {
  height: 100%;
  width: 50px;
  background: white;
  float: left;
  border-right: 1px solid black;
  position: relative;
}

.blacknote {
  position: absolute;
  height: 65%;
  width: 55%;
  z-index: 1;
  background: #777;
  left: 68%;
}

.instrument-button {
  background: orangered;
  border: none;
  color: white;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
}

.effect-button {
  background: blue;
  border: none;
  color: white;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
}

.effect-button-padding {
  padding-top: 16px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.26/Tone.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.26/Tone.js.map'></script>

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div>
  <h1>Synth AF</h1>
</div>
<div>
  <h4>Intruments</h4>
  <div id="btn-group-instruments"></div>
</div>
<div class="effect-button-padding">
  <h4>Effects</h4>
  <div id="btn-group-effects"></div>
</div>
<div class="" id="container">

</div>

因此，这是此合成器的下一步：

合成器的当前状态保存在 synthSetup
仪器存储为对象数组
效果存储为对象数组
乐器和效果器被动态地放入 DOM
单击任何白色或黑色按钮时，synthSetup（状态）被读取并播放音符（所选乐器和效果列表）

问题：

您不能从效果列表中删除效果（可以在效果按钮的点击处理程序中处理）

谁能帮我传递这些数据？ ;)

Can anyone help me pass this data? ;)

javascript

audio

jquery

user-interface

dynamic