使用 Phaser 播放音频

Question

谁能帮我解决 Phaser 声音问题？
我在 TypeScript 中编写了一个具有播放声音功能的按钮，但是当我在 chrome 上按下按钮时，Phaser 在 chrome 控制台上给我以下警告： Phaser.Cache.getSound: Key "sample" not found in Cache.
一开始我以为按下按钮时mp3文件还没有完全载入，但是等了足够多的时间，情况还是一样...

export class PlayState extends Phaser.State {

    private sampleSound: Phaser.Sound;
    private testButton:  Phaser.Sprite;

    preload() {
      this.load.image("test", "assets/image/test.png")
      this.load.audio("sample", "assets/audio/sample.mp3");
    }

    create() {
      // Add test button
      this.testButton = this.add.sprite(50, 50, "test");
      this.testButton.anchor.setTo(0.5);
      this.testButton.inputEnabled = true;
      this.testButton.events.onInputDown.add(this.test);

      // Add audio
      this.sampleSound = this.add.audio("sample");
    }

    private test = () => {
      this.sampleSound.play();
    }
}

我当然在 assets/audio 目录下有 sample.mp3 文件，因此 Phaser 应该可以找到它。

Answer 1

加载声音文件是一回事，对其进行解码是另一回事。不确定为什么会出现缓存错误，但最有可能发生的情况是您已加载文件，但尚未解码。

尝试这样的事情：

export class PlayState extends Phaser.State {

    private sampleSound: Phaser.Sound;
    private testButton: Phaser.Sprite;

    preload() {
        this.load.image("test", "assets/image/test.png");
        this.load.audio("sample", "assets/audio/sample.mp3");
    }

    create() {
        // Add audio
        this.sampleSound = this.add.audio("sample");

        this.game.sound.setDecodedCallback(["sample"], this.createButton, this);
    }

    private createButton(): void {
        // Add test button
        this.testButton = this.add.sprite(50, 50, "test");
        this.testButton.anchor.setTo(0.5);
        this.testButton.inputEnabled = true;
        this.testButton.events.onInputDown.add(this.test);
    }

    private test = () => {
        this.sampleSound.play();
    }
}

这样您只在 mp3 文件解码后创建按钮。如果您需要加载更多声音，请将更多键添加到第一个参数。

播放声音的lambda函数大概可以是一个普通的实例方法（只是为了保持一致性）

还没有测试过，但应该是这样。

Answer 2

将 mp3 文件 放在转译的 javascript 文件 的文件夹下。在我的例子中，TypeScript 正在寻找 source/assets/audio/sample.mp3，但转译后的 javascript 正在寻找 dist/assets/audio/sample.mp3.
（test.png 已经在那里，所以 Phaser 能够找到它。但我完全忘记放置 mp3 文件...）

当您使用 TypeScript 时，请始终注意脚本是在转换后执行的。

使用 Phaser 播放音频

Playing audio with Phaser

typescript

phaser-framework