如何在我的 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.org/reference/#/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);
    });
}

如何在我的 JavaScript 素描中重播录制的音频？

How can I replay the recorded audio in my JavaScript sketch?

javascript

audio

p5.js