基于Electron-React Boilerplate开发音频应用：Tone.js采样文件加载及URL创建问题

方法1：利用Blob + URL.createObjectURL #

如果你的音频数据已经是Blob对象（比如通过音频录制、生成或用户上传得到），可以直接通过URL.createObjectURL生成Sampler可识别的临时URL：

import { Sampler } from 'tone';

// 假设audioBlob是已获取到的音频Blob数据
const audioUrl = URL.createObjectURL(audioBlob);

// 初始化Sampler，将生成的URL绑定到对应音高
const sampler = new Sampler({
  C4: audioUrl,
  // 其他音高的音频数据可按同样方式处理
}).toDestination();

// Sampler销毁时释放临时URL，避免内存泄漏
sampler.dispose().then(() => {
  URL.revokeObjectURL(audioUrl);
});

方法2：处理ArrayBuffer格式的音频数据 #

如果你的音频数据是ArrayBuffer（比如从API请求、本地文件读取得到），先将其转换为Blob再生成URL：

import { Sampler } from 'tone';

// 假设audioArrayBuffer是获取到的音频ArrayBuffer数据
const audioBlob = new Blob([audioArrayBuffer], { type: 'audio/wav' });
const audioUrl = URL.createObjectURL(audioBlob);

const sampler = new Sampler({
  C4: audioUrl,
}).toDestination();

// 通过监听dispose事件清理资源
sampler.on('dispose', () => {
  URL.revokeObjectURL(audioUrl);
});

方法3：Electron环境下读取本地音频Buffer #

在Electron中如果读取了本地音频文件的Buffer数据，同样可以转成Blob生成URL：

import { Sampler } from 'tone';
import fs from 'fs/promises';

async function initSampler() {
  // 读取本地音频文件的Buffer
  const audioBuffer = await fs.readFile('/path/to/your/sample.wav');
  const audioBlob = new Blob([audioBuffer], { type: 'audio/wav' });
  const audioUrl = URL.createObjectURL(audioBlob);

  const sampler = new Sampler({
    C4: audioUrl,
  }).toDestination();

  // 应用退出或组件卸载时清理资源
  window.addEventListener('beforeunload', () => {
    sampler.dispose();
    URL.revokeObjectURL(audioUrl);
  });
}

initSampler();

关键注意事项 #

• 必须在Sampler销毁后调用URL.revokeObjectURL释放临时URL，防止内存泄漏。
• 确保Blob的type参数与音频格式匹配（比如audio/wav、audio/mp3），否则Tone.js无法识别。
• 如果是通过Web Audio API合成的音频数据，导出为Blob后可直接按上述方式处理。

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