Electron应用中如何为<audio>标签添加CAF/AMR等不支持编解码器的播放支持？

我刚好处理过类似的场景，给你几个实用的方案，都是基于FFmpeg在Electron里的应用，帮你搞定CAF/AMR这类小众格式的播放控制：

方案一：预转码为原生支持格式（简单易实现） #

这个思路最直接：用FFmpeg把CAF/AMR转成Chromium原生支持的格式（比如MP3、WAV），然后把转好的文件喂给<audio>标签，这样就能直接用原生的播放/暂停、进度跳转等控制了。

具体步骤： #

1. 引入FFmpeg工具：在Electron项目里可以用fluent-ffmpeg这个Node.js库，它封装了FFmpeg的命令行调用，用起来更方便。或者直接用ffmpeg-static包引入预编译好的FFmpeg二进制文件，避免依赖系统环境。
2. 转码处理：读取用户选择的CAF/AMR文件，调用FFmpeg转码为MP3/WAV，生成临时文件（可以用tmp库管理临时文件，避免占用磁盘空间）。
3. 绑定到audio标签：把临时文件的路径设置为<audio>的src，之后就可以像操作普通音频一样控制播放了。

代码示例： #

const ffmpeg = require('fluent-ffmpeg');
const ffmpegPath = require('ffmpeg-static').path;
const tmp = require('tmp');
const fs = require('fs');

// 设置FFmpeg路径
ffmpeg.setFfmpegPath(ffmpegPath);

// 转码AMR到MP3
function transcodeAudio(inputPath) {
  return new Promise((resolve, reject) => {
    // 创建临时文件
    const tmpFile = tmp.fileSync({ postfix: '.mp3' });
    
    ffmpeg(inputPath)
      .toFormat('mp3')
      .on('end', () => {
        resolve(tmpFile.name);
      })
      .on('error', (err) => {
        tmpFile.removeCallback();
        reject(err);
      })
      .save(tmpFile.name);
  });
}

// 使用示例
async function loadAudio(inputPath) {
  const outputPath = await transcodeAudio(inputPath);
  const audioElement = document.getElementById('audio-player');
  audioElement.src = `file://${outputPath}`;
  
  // 播放结束后清理临时文件
  audioElement.addEventListener('ended', () => {
    fs.unlinkSync(outputPath);
  });
}

方案二：实时转码+Web Stream API（适合大文件/无临时文件） #

如果不想生成临时文件，或者要处理大体积的音频文件，可以用FFmpeg实时转码，通过Web Stream API把转码后的流直接喂给<audio>标签。

核心思路： #

1. 用Node.js的child_process.spawn启动FFmpeg进程，设置输出为管道（pipe:），指定输出格式为原生支持的格式（比如MP3）。
2. 把FFmpeg的输出流转换为Web ReadableStream，然后通过MediaSource对象将流注入到<audio>标签中。
3. 处理进度跳转：当用户拖动进度条时，需要计算跳转的时间点，然后重启FFmpeg进程，从指定位置开始转码，更新MediaSource的流。

关键代码片段： #

const { spawn } = require('child_process');
const ffmpegPath = require('ffmpeg-static').path;

function createAudioStream(inputPath, startTime = 0) {
  const ffmpegProcess = spawn(ffmpegPath, [
    '-ss', startTime.toString(), // 从指定时间开始转码
    '-i', inputPath,
    '-f', 'mp3',
    '-vn', // 忽略视频（如果有的话）
    '-acodec', 'libmp3lame',
    'pipe:1' // 输出到标准输出
  ]);

  // 将Node流转换为Web Stream
  const webStream = ffmpegProcess.stdout.readableWebStream();
  return { stream: webStream, process: ffmpegProcess };
}

// 初始化播放
async function initStreamPlayback(inputPath) {
  const mediaSource = new MediaSource();
  const audioElement = document.getElementById('audio-player');
  audioElement.src = URL.createObjectURL(mediaSource);

  mediaSource.addEventListener('sourceopen', async () => {
    const sourceBuffer = mediaSource.addSourceBuffer('audio/mpeg');
    const { stream, process } = createAudioStream(inputPath);
    
    // 读取流并添加到SourceBuffer
    const reader = stream.getReader();
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      while (!sourceBuffer.updating) {
        sourceBuffer.appendBuffer(value);
      }
    }

    // 处理进度跳转
    audioElement.addEventListener('seeked', () => {
      // 终止旧的FFmpeg进程
      process.kill();
      // 从新的时间点开始转码
      const newStartTime = audioElement.currentTime;
      const { stream: newStream, process: newProcess } = createAudioStream(inputPath, newStartTime);
      // 重置SourceBuffer并加载新流
      sourceBuffer.abort();
      const newReader = newStream.getReader();
      // 重复上述读取流的逻辑...
    });
  });
}

注意事项 #

• FFmpeg编解码器支持：确保你用的FFmpeg版本支持CAF/AMR的解码（有些预编译版本可能阉割了这些编解码器，建议用ffmpeg-static或者自己编译完整版本）。
• Electron权限：如果是读取本地文件，要确保Electron的主进程配置了nodeIntegration: true或者使用contextBridge暴露必要的API到渲染进程。
• 临时文件清理：方案一中的临时文件一定要记得在播放结束、用户关闭文件或者应用退出时清理，避免磁盘冗余。

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