如何在我的JavaScript草图中重放录制的音频？

Question

我按照一个教程，录制了3秒钟的音频，然后自动播放。它将音频存储在一个数组中，并将其变成一个URL。我添加了一个带有音频播放功能的按钮。所以当你按下这个按钮时，它就会自动记录和播放音频。我的问题是，我怎样才能添加第二个按钮来播放和重放音频。所以我不想让它在录制完成后自动播放，我只想让它在按下按钮时播放。

这都是普通的JavaScript。先谢谢你了。

function setup() {
  createCanvas(400, 400);
  button = createButton('Audio Hack');
  button.position(160, 180);
  button.mousePressed(audioHack);
  }

function audioHack() {
  navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
      const mediaRecorder = new MediaRecorder(stream);
      mediaRecorder.start();

      const audioChunks = [];
      mediaRecorder.addEventListener("dataavailable", event => {
        audioChunks.push(event.data);
      });

      mediaRecorder.addEventListener("stop", () => {
        const audioBlob = new Blob(audioChunks);
        const audioUrl = URL.createObjectURL(audioBlob);
        const audio = new Audio(audioUrl);
        audio.play();
      });

      setTimeout(() => {
        mediaRecorder.stop();
      }, 3000);
    });
}

Answer 1

我相信你可以通过将音频存储在一个全局变量中来实现。删除 audio.play(). 你知道p5.js有一个漂亮的p5.sound库，让这一切变得超级简单吗？https:/p5js.orgreference#p5.SoundRecorder。

let recorderAudio = null;    

function setup() {
  createCanvas(400, 400);
  button = createButton('Audio Hack');
  button.position(160, 180);
  button.mousePressed(audioHack);

  playButton = createButton('Play Audio');
  playButton.position(160, 200);
  playButton.mousePressed(function(){
    if (recordedAudio != null) recordedAudio.play();
  });
}

function audioHack() {
  navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
      const mediaRecorder = new MediaRecorder(stream);
      mediaRecorder.start();

      const audioChunks = [];
      mediaRecorder.addEventListener("dataavailable", event => {
        audioChunks.push(event.data);
      });

      mediaRecorder.addEventListener("stop", () => {
        const audioBlob = new Blob(audioChunks);
        const audioUrl = URL.createObjectURL(audioBlob);
        recordedAudio = new Audio(audioUrl);
        //audio.play();
      });

      setTimeout(() => {
        mediaRecorder.stop();
      }, 3000);
    });
}