如何在p5.js中实现录音存文件并在同文件preload中直接调用？

关于preload与录音流程的顺序问题 #

preload是p5.js初始化阶段最先执行的函数，会在setup、draw以及任何交互逻辑之前完成资源加载。所以不可能先执行录音流程，再让preload读取刚保存的音频文件——等你完成录音时，preload早就执行完毕了。

如果你的需求是在同一次sketch运行中，录制音频后直接使用它，根本不需要通过preload重新加载：你录制时用到的soundFile对象本身就已经包含了音频数据，录制完成后直接调用soundFile.play()即可，没必要保存再加载。

如果你的需求是下次启动sketch时加载之前录制保存的mySound.wav，那preload是可以正常加载的，但这是跨sketch运行的场景，和本次录音流程无关。

p5.SceneManager的解决方案 #

p5.SceneManager可以帮你更清晰地拆分不同交互阶段（比如「等待录音」「录制中」「播放音频」），让逻辑更整洁，具体可以这么做：

• 定义多个场景对应不同交互阶段
• 在录音场景完成录制后，切换到播放场景，直接使用已有的soundFile对象；如果确实需要重新加载保存的文件，可在场景的enter方法里用loadSound（运行时加载，无需依赖preload）

示例代码（基于SceneManager） #

// 初始化场景管理器
const manager = new SceneManager();

// 全局变量存储录音相关对象
let soundFile, recorder, state = 0;

// 场景1：等待开始录音
function WaitScene() {
  this.enter = function() {
    background(200);
    text('点击开始录音', width/2, height/2);
    textAlign(CENTER);
  }

  this.mousePressed = function() {
    // 初始化录音对象
    soundFile = new p5.SoundFile();
    recorder = new p5.SoundRecorder();
    recorder.setInput();
    recorder.record(soundFile);
    state = 1;
    manager.showScene(RecordScene);
  }
}

// 场景2：录制中/停止录制
function RecordScene() {
  this.enter = function() {
    background(255, 100, 100);
    text('再次点击停止录音', width/2, height/2);
  }

  this.mousePressed = function() {
    recorder.stop();
    state = 2;
    // 保存音频
    save(soundFile, 'mySound.wav');
    manager.showScene(PlayScene);
  }
}

// 场景3：播放音频
function PlayScene() {
  this.enter = function() {
    background(100, 255, 100);
    text('点击播放录音', width/2, height/2);
    // 如果需要重新加载保存的文件（同一次运行中其实没必要）
    // song = loadSound('mySound.wav', () => {
    //   console.log('加载完成');
    // });
  }

  this.mousePressed = function() {
    // 直接用录制好的soundFile播放
    soundFile.play();
    text('正在播放', width/2, height/2 + 20);
  }
}

function setup() {
  createCanvas(400, 400);
  // 注册场景
  manager.addScene(WaitScene);
  manager.addScene(RecordScene);
  manager.addScene(PlayScene);
  // 启动初始场景
  manager.showScene(WaitScene);
}

function draw() {
  manager.draw();
}

function mousePressed() {
  manager.handleEvent('mousePressed');
}

总结 #

• 同一次运行中，录制后的音频直接用soundFile即可，无需preload
• preload只能加载sketch启动前就存在的文件，无法加载本次运行中生成的文件
• p5.SceneManager可以帮你拆分不同交互阶段，让录音、播放的逻辑更清晰，不需要依赖preload来处理动态生成的音频

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