Phaser 3中Audio key 'stretchAudio'缓存缺失问题求助

问题现象 #

调用this.sound.add('stretchAudio')时触发错误：'stretchAudio' missing from cache，已在预加载场景中配置音频加载逻辑。

核心原因分析 #

1. Webpack环境下相对路径失效：直接使用./assets/t1.mp3无法指向打包后正确的资源路径
2. 场景加载顺序问题：游戏场景可能在预加载完成前就已启动
3. 代码语法错误：游戏场景的create方法写法有误
4. 音频资源未被Webpack正确打包处理

分步解决方案 #

1. 修正资源引入方式（Webpack环境必改） #

在预加载场景中通过import导入音频资源，避免相对路径问题：

// PreloadScene.js
import stretchAudio from '../assets/t1.mp3';

export default class PreloadScene extends Phaser.Scene {
    constructor() {
        super('PreloadScene');
    }

    preload() {
        this.load.audio('stretchAudio', stretchAudio);
    }
}

2. 修复游戏场景语法错误 #

原代码中create{是语法错误，改为标准的方法声明：

// PlayScene.js
create() {
    const stretchSound = this.sound.add('stretchAudio');
    // 可选：测试播放
    // stretchSound.play();
}

3. 确保预加载完成后再进入游戏场景 #

在预加载场景的create方法中主动切换到游戏场景，保证资源完全缓存：

// PreloadScene.js
create() {
    // 预加载完成后启动游戏场景
    this.scene.start('PlayScene');
}

4. 优化Webpack音频资源打包配置（可选） #

修改Webpack基础配置中的file-loader规则，明确资源输出路径：

// webpack.base.js
module.exports = {
    // ...其他配置
    module: {
        rules: [
            // ...其他规则
            {
                test: /\.(mp3|wav|ogg)$/i,
                use: {
                    loader: 'file-loader',
                    options: {
                        outputPath: 'assets/audio/',
                        name: '[name].[ext]'
                    }
                }
            }
        ]
    }
};

5. 音频兼容性优化（可选） #

提供多格式音频文件，让Phaser自动适配浏览器支持：

// PreloadScene.js
preload() {
    this.load.audio('stretchAudio', [
        '../assets/t1.mp3',
        '../assets/t1.ogg',
        '../assets/t1.wav'
    ]);
}

验证步骤 #

1. 重新执行Webpack打包命令
2. 启动项目，确认预加载场景先执行
3. 在游戏场景中调用音频时不再触发缓存缺失错误

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