Как я могу воспроизвести записанный звук в моем скетче JavaScript? - PullRequest
Новая
       90

Как я могу воспроизвести записанный звук в моем скетче JavaScript?

1 голос
/ 09 мая 2020

Я следил за учебником, который записывает звук в течение 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);
    });
}

1 Ответ

0 голосов
/ 10 мая 2020

Я считаю, что вы можете сделать это, сохранив звук в глобальной переменной. Удалите 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);
    });
}
...