使用SoundJS 1.0与PreloadJS 1.0加载音频精灵注册4个声音报错求助

嘿，这个Uncaught TypeError: Cannot read property '1' of null错误我之前帮人排查过几次，大概率是你批量处理四个音频片段时，音频精灵的元数据解析或者实例化逻辑出了问题——毕竟单独加载一个片段没问题，说明单个流程是通的，批量时某个环节没处理好。

下面是我总结的几个常见问题点和对应的解决办法：

1. 先检查音频精灵的JSON配置是否靠谱 #

SoundJS的音频精灵完全依赖正确的JSON配置文件，里面得明确每个片段的起始时间、时长这些信息。如果你的JSON里某个片段（比如b/c/d）的定义缺漏、拼写错了，或者格式不对，PreloadJS加载后解析出来就是null，自然会报错“无法读取null的属性1”。

给你贴个标准的音频精灵JSON示例，对照着检查你的配置：

{
  "resources": [{"src": "your-audio-sprite.mp3"}],
  "sprite": {
    "sounda": {"start": 0, "duration": 2000},
    "soundb": {"start": 2000, "duration": 1500},
    "soundc": {"start": 3500, "duration": 3000},
    "soundd": {"start": 6500, "duration": 2500}
  }
}

重点确认：JSON里的片段键名（比如sounda）和你代码里的sound+"a"完全一致，大小写、拼写都不能错。

2. 排查批量实例化的代码逻辑 #

你说注释后三行只创建一个实例就正常，说明循环/批量处理的代码有问题。比如可能你没等PreloadJS完全加载完所有资源就急着创建实例，或者循环里复用了错误的对象。

给你写个正确的批量创建流程，你可以对照着改：

// 初始化PreloadJS队列，注册SoundJS插件
const preloadQueue = new createjs.LoadQueue();
preloadQueue.installPlugin(createjs.Sound);

// 加载音频精灵的JSON配置和音频文件
preloadQueue.loadManifest([
  {src: "your-sprite-config.json", type: "json"},
  {src: "your-audio-sprite.mp3", id: "mainAudioSprite"}
]);

// 必须等所有资源加载完成后再处理
preloadQueue.on("complete", () => {
  // 先注册音频精灵的配置
  createjs.Sound.registerSound(preloadQueue.getResult("your-sprite-config.json"));

  // 批量创建四个片段的实例
  const soundSuffixes = ["a", "b", "c", "d"];
  const soundInstances = {};

  soundSuffixes.forEach(suffix => {
    const soundId = `sound${suffix}`;
    // 先检查这个soundId是否真的在音频精灵里存在
    if (createjs.Sound.soundCache[soundId]) {
      soundInstances[soundId] = createjs.Sound.createInstance(soundId);
    } else {
      console.error(`⚠️ 音频精灵里找不到ID为${soundId}的片段！`);
    }
  });

  // 测试随机播放
  const randomSuffix = soundSuffixes[Math.floor(Math.random() * soundSuffixes.length)];
  soundInstances[`sound${randomSuffix}`].play();
});

这里的核心注意点：

• 一定要等complete事件触发后再创建实例，确保所有资源（包括JSON配置）都加载解析完毕
• 创建实例前先检查对应的soundId是否存在，避免对着null瞎操作

3. 确认版本兼容性 #

虽然你用的都是1.0版本，但有些旧版本的PreloadJS和SoundJS组合可能存在小bug。如果是用CDN加载的，确认两者的版本号完全一致；如果是本地文件，确保是官方发布的正式版，不是开发快照或者修改过的版本。

最后快速验证步骤 #

1. 打开浏览器控制台，输入createjs.Sound.soundCache回车，看看里面有没有sounda/soundb/soundc/soundd这四个键，每个键对应的对象是不是有正常的属性
2. 如果某个键不存在，回头检查JSON配置和代码里的命名是否匹配
3. 确认你没有在complete事件触发前就调用createInstance

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