Audio 对相互独立工作的按钮重复使用功能？

我正在尝试用P5.js创建类似于音频循环器的东西，也就是说，您录制一段音频，它作为循环播放给您，然后您可以录制其他音频片段一起播放以创建一首歌曲

我知道如何录制音频，将其作为循环播放，并停止循环，但我不确定重复该功能的最佳方式，以便它可以用于相互独立的按钮并录制单独的音频文件，因为我想录制多个循环

我对P5.js还是很陌生，所以可能有一个简单的方法可以做到这一点——任何想法都有帮助！一般来说，如果你有任何关于如何实现这个项目作为一个整体（音频活套）的想法，我很乐意听到他们

这是我的代码：

let mic, recorder, soundFile, button;

let state = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(200);
  mic = new p5.AudioIn();
  mic.start();
  recorder = new p5.SoundRecorder();
  recorder.setInput(mic);
  soundFile = new p5.SoundFile();

  button = createButton("record");

  button.size(200, 100);
  button.style("font-family", "Bodoni");
  button.style("font-size", "48px");

  button.position(10, 10, 10);
  button.mouseClicked(loopRecord);
}


// this is the looper
function loopRecord() {
  if (state === 0 && mic.enabled) {
    recorder.record(soundFile);

    background(255, 0, 0);
    state++;
  } else if (state === 1) {
    recorder.stop();

    background(0, 255, 0);
    state++;
  } else if (state === 2) {
    soundFile.loop();
    state++;
  } else if (state === 3) {
    soundFile.stop();
    state++;
  } else if (state === 4) {
    state === 0;
  }
} 

---

您应该以某种方式组织数据，以便每个按钮都有自己的状态（以及其他参数，这些参数不应该是全局的，而是每个循环的唯一参数）

下面是使用轨迹对象数组的示例：

我也会把代码复制到这里

let-mic
//之后将填充此数组
让tracksArray=[]；
函数设置（）{
createCanvas（400400）；
背景（200）；
//我们只需要一个麦克风（它仍然是全球性的）
麦克风=新的p5.AudioIn（）；
mic.start（）；
//我们调用一个函数，该函数创建一个自定义“track”对象，并将其放入tracksArray（您可以将其用于其他用途，但目前尚未使用）
createTrack（）；
//我们创建一个按钮，当我们点击它时，它调用相同的函数
const addTrackButton=createButton（“添加轨迹”）；
addTrackButton.mouseClicked（createTrack）
addTrackButton.位置（10,10）
}
//我们现在使用名称（字符串）而不是抽象数字来设置轨迹的状态
函数HandletTrackButtonClick（轨迹对象）{
if（trackObject.state===“空闲”&&mic.enabled）{
trackObject.recorder.record（trackObject.soundFile）；
背景（255,0,0）；
trackObject.state=“录制”；
console.dir（trackObject.button.elt.innerText=“[recording..]”）；
}else if（trackObject.state==“录制”）{
trackObject.recorder.stop（）；
背景（0,255,0）；
trackObject.state=“已停止”；
console.dir（trackObject.button.elt.innerText=“play”）；
}else if（trackObject.state==“stopped”）{
trackObject.soundFile.loop（）；
trackObject.state=“播放”；
console.dir（trackObject.button.elt.innerText=“[playing..]stop”）
}else if（trackObject.state==“播放”）{
trackObject.soundFile.stop（）；
trackObject.state=“已停止”；
console.dir（trackObject.button.elt.innerText=“[stopped..]play”）
}
}
函数createTrack（）{
const newButton=createButton（“记录”）；
样式（“字体系列”、“Bodoni”）；
样式（“字体大小”，“48px”）；
//我们不再定位此按钮，而是使用html文档的“流”
样式（“显示”、“块”）；
//这是我们创建的“轨迹”对象，我们将以前的全局参数/状态附加到该对象上
常量newTrackObject={
按钮：新按钮，
状态：“空闲”，
录音机：新的p5.SoundRecorder（），
声音文件：新的p5.soundFile（）
};
mouseClicked（function（））{
HandletTrackButtonClick（newTrackObject）
});
newTrackObject.recorder.setInput（麦克风）；
tracksArray.push（newTrackObject）；
}