求助：JavaScript异步音频加载函数为何存在1%的失败概率？

核心问题点 #

1. 音频加载逻辑错误
   你的_loadAsync方法在创建Audio实例后立即resolve，此时音频资源根本没开始加载，更无法保证加载成功。同时onerror事件绑定在resolve之后，若创建实例时直接出错，错误无法被捕获。另外，没有主动调用audio.load()触发加载，部分浏览器不会自动发起请求。

2. 无错误捕获机制
   loadAudioAsync和init都没有错误处理，一旦音频加载失败，Promise会被拒绝，但没有任何日志输出，导致你无法定位问题。后续依赖sounds变量的代码会因变量未定义报错，最终导致页面空白。

3. 拼写错误
   调用代码里的windows.onload是笔误，正确应为window.onload，这个错误会直接导致初始化函数init无法执行，是页面偶尔空白的直接诱因之一。

修复后的代码 #

Chant类修正

export default class Chant {
  static bundles = {};

  constructor() {
    if (this instanceof Chant) {
      throw Error('Chant is a static class and cannot be instantiated.');
    }
  }

  static addBundle(bundle, sources) {
    this.bundles[bundle] = sources;
  }

  static async loadBundle(bundleKey) {
    const audios = {};
    const bundle = this.bundles[bundleKey];
    for (const key in bundle) {
      audios[key] = await this._loadAsync(bundle[key]);
    }
    delete this.bundles[bundleKey];
    return audios;
  }

  static async _loadAsync(src) {
    return new Promise((resolve, reject) => {
      const audio = new Audio(src);
      
      // 优先绑定错误事件
      audio.onerror = () => {
        reject(new Error(`Invalid audio source: ${src}`));
      };
      
      // 等待音频加载完成后再resolve
      audio.addEventListener('canplaythrough', () => {
        resolve(audio);
      }, { once: true }); // 确保事件只触发一次
      
      // 主动触发加载
      audio.load();
    });
  }
}

调用代码修正

import Chant from '/js/modules/chant.mjs';

let sounds;

async function loadAudioAsync() {
  Chant.addBundle('sounds', {
    spinner: 'assets/sounds/spinner-0.ogg',
    horn: 'assets/sounds/party-horn-0.ogg',
    pop: 'assets/sounds/pop-0.ogg'
  });
  
  try {
    sounds = await Chant.loadBundle('sounds');
    console.log('Sounds async load complete.');
  } catch (err) {
    console.error('Audio loading failed:', err);
    // 可添加降级逻辑，比如使用默认音频或跳过加载
  }
}

async function init() {
  await loadAudioAsync();
  // 后续页面初始化逻辑，即使音频加载失败也能正常执行
}

// 修正拼写错误
window.onload = () => {
  init();
};

其他可能的诱因 #

• 浏览器缓存过期：长时间运行后，缓存的音频资源可能过期，服务器返回404/500等错误，原代码无法捕获这类错误导致流程中断。
• 浏览器自动播放策略：部分浏览器在无用户交互时会限制音频加载，可考虑在用户首次点击等交互后再触发音频加载。

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