如何在NW.js应用中录制保存播放音频？需兼顾AudioContext播放与录制

核心思路 #

直接复用你已有的单例AudioContext，通过Web Audio API的MediaStreamDestination节点，将音频输出同时导向扬声器和录制流，无需替换或模拟AudioContext。

实现步骤 #

• 创建录制目标节点
  生成MediaStreamDestination节点，用于将AudioContext的音频输出转换为可录制的媒体流：

  const audioContext = 你的单例AudioContext实例;
  const mediaDest = audioContext.createMediaStreamDestination();
  

• 分流音频到播放和录制通道
  找到你AudioContext中最终输出的节点（比如主增益节点mainGainNode），断开它与audioContext.destination的连接，转而连接到mediaDest；同时把mediaDest生成的流重新导入AudioContext，实现同步播放：

  // 假设主输出节点为mainOutputNode
  mainOutputNode.disconnect(audioContext.destination);
  mainOutputNode.connect(mediaDest);
  
  // 将录制流导回扬声器
  const streamSource = audioContext.createMediaStreamSource(mediaDest.stream);
  streamSource.connect(audioContext.destination);
  

• 录制并保存音频文件
  利用原生MediaRecorder处理录制流，结合NW.js的文件系统API保存文件：

  const recorder = new MediaRecorder(mediaDest.stream, { mimeType: 'audio/webm' });
  const audioChunks = [];
  
  recorder.ondataavailable = (e) => {
    if (e.data.size > 0) audioChunks.push(e.data);
  };
  
  recorder.onstop = () => {
    const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
    const fs = require('fs');
    const path = require('path');
    const savePath = path.join(require('os').homedir(), 'recorded_audio.webm');
    
    fs.writeFile(savePath, audioBlob, (err) => {
      err ? console.error('保存失败:', err) : console.log('音频已保存至:', savePath);
    });
  };
  
  // 启动录制
  recorder.start();
  
  // 停止录制示例（可绑定到按钮点击等交互）
  // recorder.stop();
  

关键注意事项 #

• 在NW.js的package.json中配置必要权限：

  {
    "permissions": ["audioCapture", "fileSystem"]
  }
  

• 确保AudioContext在用户交互（如按钮点击）后初始化，规避浏览器自动播放策略限制。
• 音频格式优先选择audio/webm（Chromium兼容性好），也可尝试audio/mp4（需对应编码支持）。

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