Electron-React主进程用Tone.js播放音频报错及替代方案咨询

问题背景 #

在Electron-React应用中，通过主进程与渲染进程的IPC事件交互，尝试用Tone.js播放MP3/WAV音频文件。已确认事件触发正常、导入路径正确，但运行时出现三类错误：

• TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))
• ReferenceError: AudioBuffer is not defined
• 未处理的Promise拒绝

原主进程代码 #

import path from "path";
import fs from "fs";
import * as Tone from "tone";
import { IpcMain, IpcMainEvent } from "electron";
import { LOAD_LITE_AUDIO, PAUSE_LITE_AUDIO, PLAY_LITE_AUDIO, LITE_AUDIO_STATUS  } from "../../../../ipcEvents";

let player: Tone.Player | null;

const registerLiteAudioEvents = (ipcMain: IpcMain) => {
  ipcMain.on(LOAD_LITE_AUDIO, (event: IpcMainEvent, filePath) => {
    if (player) {
      player.stop();
      player.dispose();
      player = null;
    }

    const loadAudioFile = async () => {
      const audioFilePath = path.resolve(filePath);
      const fileExists = fs.existsSync(audioFilePath);

      if (fileExists) {
        const fileBuffer = fs.readFileSync(audioFilePath);
        const audioBuffer = await Tone.context.decodeAudioData(fileBuffer);

        player = new Tone.Player(audioBuffer).toDestination();
        // Start playing the audio
        event.reply(PLAY_LITE_AUDIO);
      } else {
        console.error("Audio file does not exist:", audioFilePath);
      }
    };

    (async () => {
      await loadAudioFile();
    })(); // IIFE
  });

  ipcMain.on(PLAY_LITE_AUDIO, (event: IpcMainEvent) => {
    if (player) {
      player.start();
      event.reply(LITE_AUDIO_STATUS, { isPlaying: true, initialVolume: 100 });
    }
  });

  ipcMain.on(PAUSE_LITE_AUDIO, (event: IpcMainEvent) => {
    if (player) {
      player.stop();
      event.reply(LITE_AUDIO_STATUS, { isPlaying: false, initialVolume: 100 });
    }
  });
};

export default registerLiteAudioEvents;

报错信息 #

[8484:0629/162814.849:ERROR:CONSOLE(2)] "TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))", source: node:electron/js2c/sandbox_bundle (2)
(node:8484) UnhandledPromiseRejectionWarning: ReferenceError: AudioBuffer is not defined
...
(node:8484) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting 
a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)

问题原因与修复方案 #

核心原因 #

Tone.js依赖浏览器环境的Web Audio API，而Electron主进程是纯Node.js环境，不存在AudioBuffer、AudioContext这类浏览器专属API，这直接导致了AudioBuffer is not defined错误，后续的decodeAudioData调用失败又引发了迭代错误和未处理Promise拒绝。

修复步骤：把音频逻辑移到渲染进程 #

渲染进程是浏览器环境，完全支持Web Audio API，适合处理音频播放。主进程只负责读取文件并传递给渲染进程。

1. 修改主进程代码（仅处理文件读取与IPC转发）

import path from "path";
import fs from "fs";
import { IpcMain, IpcMainEvent } from "electron";
import { LOAD_LITE_AUDIO, PAUSE_LITE_AUDIO, PLAY_LITE_AUDIO, LITE_AUDIO_STATUS } from "../../../../ipcEvents";

const registerLiteAudioEvents = (ipcMain: IpcMain) => {
  // 用handle处理异步请求，返回文件Buffer或错误信息
  ipcMain.handle(LOAD_LITE_AUDIO, async (_event, filePath) => {
    try {
      const audioFilePath = path.resolve(filePath);
      if (fs.existsSync(audioFilePath)) {
        const fileBuffer = fs.readFileSync(audioFilePath);
        return { success: true, buffer: fileBuffer };
      } else {
        return { success: false, error: "音频文件不存在" };
      }
    } catch (err) {
      return { success: false, error: (err as Error).message };
    }
  });

  // 播放/暂停事件直接转发给渲染进程
  ipcMain.on(PLAY_LITE_AUDIO, (event) => {
    event.sender.send(PLAY_LITE_AUDIO);
  });

  ipcMain.on(PAUSE_LITE_AUDIO, (event) => {
    event.sender.send(PAUSE_LITE_AUDIO);
  });
};

export default registerLiteAudioEvents;

2. 渲染进程代码（处理Tone.js播放逻辑）

import * as Tone from "tone";
import { ipcRenderer } from "electron";
import { LOAD_LITE_AUDIO, PAUSE_LITE_AUDIO, PLAY_LITE_AUDIO, LITE_AUDIO_STATUS } from "../../../ipcEvents";

let player: Tone.Player | null = null;

// 示例：用户触发加载音频（比如点击按钮）
const loadAudio = async (filePath: string) => {
  try {
    const result = await ipcRenderer.invoke(LOAD_LITE_AUDIO, filePath);
    if (result.success) {
      // 清理旧播放器
      if (player) {
        player.stop();
        player.dispose();
        player = null;
      }
      // 解码音频并创建播放器
      const audioBuffer = await Tone.context.decodeAudioData(result.buffer);
      player = new Tone.Player(audioBuffer).toDestination();
    } else {
      console.error(result.error);
    }
  } catch (err) {
    console.error("加载音频失败:", err);
  }
};

// 监听播放事件
ipcRenderer.on(PLAY_LITE_AUDIO, async () => {
  if (!player) return;
  // 唤醒音频上下文（浏览器要求用户交互才能激活）
  if (Tone.context.state !== "running") {
    await Tone.context.resume();
  }
  player.start();
  ipcRenderer.send(LITE_AUDIO_STATUS, { isPlaying: true, initialVolume: 100 });
});

// 监听暂停事件
ipcRenderer.on(PAUSE_LITE_AUDIO, () => {
  player?.stop();
  ipcRenderer.send(LITE_AUDIO_STATUS, { isPlaying: false, initialVolume: 100 });
});

3. 额外修复点

• 音频上下文唤醒：Electron渲染进程和浏览器一样，需要用户交互（比如点击）才能激活AudioContext，否则播放会无声或失败，所以要在播放前调用Tone.context.resume()。
• Promise错误捕获：所有异步操作都要加try/catch或.catch()，避免未处理的Promise拒绝。

Electron音频播放的其他可行方案 #

1. 主进程直接用webContents.playAudio() #

不需要第三方库，主进程直接调用窗口的播放API：

import { BrowserWindow } from "electron";
import path from "path";

// 播放音频文件
const playAudioInMain = (filePath: string) => {
  const win = BrowserWindow.getFocusedWindow();
  if (!win) return;
  win.webContents.playAudio(path.resolve(filePath))
    .then(() => console.log("播放成功"))
    .catch(err => console.error("播放失败:", err));
};

2. 渲染进程用原生<audio>标签 #

适合简单播放需求，无需额外依赖：

<audio id="audioPlayer" controls style="display:none"></audio>

import path from "path";

const audioPlayer = document.getElementById("audioPlayer") as HTMLAudioElement;

// 设置音频源
audioPlayer.src = `file://${path.resolve("你的音频路径")}`;

// 播放
audioPlayer.play().catch(err => console.error(err));

// 暂停
audioPlayer.pause();

3. 主进程用node-speaker #

适合纯Node.js环境的音频播放，支持多种格式：

npm install speaker

import fs from "fs";
import Speaker from "speaker";
import path from "path";

// 播放音频文件
const stream = fs.createReadStream(path.resolve("你的音频路径"));
stream.pipe(new Speaker({
  channels: 2,
  bitDepth: 16,
  sampleRate: 44100
}));

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