Vue.js+Electron动态播放主线程更新的MP3文件报错如何解决

算力阿峰

2026-9-26

错误原因

路径处理逻辑错误：你将IPC传递的完整音频路径切割后拼接为./文件名的相对路径，该相对路径相对于渲染进程当前加载的页面地址，无法定位到实际存储的音频文件，是触发no supported source was found错误的核心原因。
音频实例初始化顺序有误：你先赋值src再设置type属性，会导致音频加载时无法正确识别资源格式。
未处理旧音频实例：重复创建Audio实例未销毁旧实例，可能引发资源占用异常。

解决方案

不要切割IPC传递的音频路径，直接将本地绝对路径转换为渲染进程可识别的file协议地址，音频文件无需放在dist目录，本地任意存储位置都可以正常读取。
调整音频属性赋值顺序，创建新实例前先销毁旧实例。
可在路径后追加随机查询参数，彻底避免缓存问题。

修正后代码示例

const it = this;
window.api.receive("playaudio", (data) => {
  if (it.audio !== false) {
    // 销毁旧的音频实例
    if (it.audio_play) {
      it.audio_play.pause();
      it.audio_play.removeEventListener("ended", it.endPlay);
      it.audio_play.src = '';
    }
    // 直接使用完整路径转file协议，不要切割
    const audioFileUrl = new URL(`file:///${data.replace(/\\/g, '/')}`).href;
    // 追加随机参数彻底规避缓存
    const src = `${audioFileUrl}?t=${Date.now()}`;
    console.log(src + " <<" );

    it.audio_play =  new Audio() ;
    it.audio_play.crossOrigin = 'anonymous';
    // 先设置type再赋值src
    it.audio_play.type = "audio/mp3";
    it.audio_play.src = src;
    it.audio_play.load();

    it.audio_play.addEventListener("ended", it.endPlay);

    const promise = it.audio_play.play();
    promise
      .then(() => {
        console.log("playing");
      })
      .catch((error) => {
        console.log(error);
      });
  }
});