如何在JavaScript代码中添加按钮重放录制音频并取消自动播放

没问题，我帮你调整代码来实现这个需求！核心思路是把录制好的音频URL保存为全局变量，让第二个按钮能访问到它，同时去掉录制完成后的自动播放逻辑。

以下是修改后的完整代码：

let recordedAudioUrl = null; // 全局变量存储录制好的音频URL
let buttonRecord;
let buttonPlay;

function setup() {
  createCanvas(400, 400);
  
  // 第一个按钮：负责录制音频（录制完成后不自动播放）
  buttonRecord = createButton('录制3秒音频');
  buttonRecord.position(120, 180);
  buttonRecord.mousePressed(startRecording);
  
  // 第二个按钮：负责播放/重放已录制的音频
  buttonPlay = createButton('播放录制的音频');
  buttonPlay.position(220, 180);
  buttonPlay.mousePressed(playRecordedAudio);
  buttonPlay.disabled = true; // 初始状态禁用，直到有录制好的音频
}

function startRecording() {
  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);
        recordedAudioUrl = URL.createObjectURL(audioBlob); // 保存音频URL到全局变量
        buttonPlay.disabled = false; // 录制完成后启用播放按钮
        stream.getTracks().forEach(track => track.stop()); // 停止媒体流，释放麦克风
      });
      
      setTimeout(() => {
        mediaRecorder.stop();
      }, 3000);
    });
}

function playRecordedAudio() {
  if (recordedAudioUrl) { // 检查是否有可用的录制音频
    const audio = new Audio(recordedAudioUrl);
    audio.play();
  }
}

关键修改说明： #

• 新增全局变量recordedAudioUrl，用来存储录制完成后的音频URL，让播放按钮能访问到它
• 拆分了原来的audioHack函数为startRecording（负责录制）和playRecordedAudio（负责播放）
• 移除了stop事件里的自动播放代码，改为保存URL并启用播放按钮
• 初始状态下播放按钮是禁用的，避免用户在没有录制音频时点击无效
• 录制完成后主动停止媒体流，释放麦克风资源，避免占用设备

这样修改后，你点击第一个按钮会录制3秒音频，录制完成后不会自动播放；点击第二个按钮就可以播放（或重放）刚才录制的音频了。

内容的提问来源于stack exchange，提问作者Morgan