如何在ElectronJS中播放音频文件？已尝试多种方法仍未解决

以下是几种经过验证的音频播放方法，附带排错要点，你可以逐一尝试：

1. 渲染进程直接使用HTML5 Audio API #

这是最直接的方式，很多时候失败是因为路径处理错误，尤其是打包后的路径差异。

方式一：JS创建Audio对象 #

// 渲染进程代码
const audio = new Audio();
// 用绝对路径加载，__dirname指向当前渲染进程文件所在目录
audio.src = `file://${__dirname}/assets/your-sound.mp3`;

// 必须捕获播放错误，才能定位问题
audio.play().catch(err => {
  console.error('播放失败详情:', err);
});

方式二：HTML标签嵌入 #

<!-- 渲染进程的HTML文件 -->
<audio id="player" src="./assets/your-sound.mp3"></audio>

<script>
  const player = document.getElementById('player');
  player.play().catch(err => console.error(err));
</script>

注意：如果是打包后的应用，相对路径可能失效，建议从主进程通过IPC传递正确的文件路径：

// 主进程代码
const { app, ipcMain } = require('electron');
const path = require('path');

ipcMain.handle('get-audio-path', () => {
  return path.join(app.getAppPath(), 'assets', 'your-sound.mp3');
});

// 渲染进程代码
const { ipcRenderer } = require('electron');

async function loadAudio() {
  const audioPath = await ipcRenderer.invoke('get-audio-path');
  const audio = new Audio(`file://${audioPath}`);
  audio.play();
}
loadAudio();

2. 使用第三方音频库（以howler.js为例） #

如果原生API有兼容问题，试试成熟的音频库，注意路径配置即可：

// 先安装依赖：npm install howler
const { Howl } = require('howler');

const sound = new Howl({
  src: ['./assets/your-sound.mp3'],
  // 监听错误，快速定位问题
  onloaderror: (id, err) => console.error('音频加载失败:', err),
  onplayerror: (id, err) => console.error('音频播放失败:', err)
});

sound.play();

3. 主进程调用系统原生播放器（备选方案） #

如果以上方法都不行，可以直接调用系统播放器播放，适合简单场景：

// 主进程代码
const { execFile } = require('child_process');
const path = require('path');

// 根据系统选择播放器
const player = process.platform === 'win32' 
  ? 'wmplayer.exe' 
  : process.platform === 'darwin' 
    ? 'afplay' 
    : 'aplay';

const audioPath = path.join(__dirname, 'assets', 'your-sound.mp3');

execFile(player, [audioPath], (err) => {
  if (err) console.error('系统播放器调用失败:', err);
});

关键排错要点 #

• 检查文件路径：用绝对路径替代相对路径，打印路径确认文件是否存在
• 查看错误信息：所有播放操作都要加catch，控制台的错误详情是定位问题的关键
• 格式兼容性：确保音频是Electron支持的格式（MP3、WAV、OGG等）
• 打包权限：Mac打包时需开启沙箱读取权限，Windows/Linux确保应用有文件读取权限

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