使用 Phaser 播放音频

Posted 2023-03-15

【中文标题】使用 Phaser 播放音频

【英文标题】：Playing audio with Phaser

【发布时间】：2016-09-08 17:19:48

【问题描述】：

谁能帮我解决 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应该能找到。

【参考方案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 函数可能是一个常规的实例方法（只是为了保持一致性）。

没测试过，应该是这个。

【讨论】：

感谢您的评论。我无法播放声音的原因是转译的 js 文件正在寻找不同的资产目录。在我为 js 目录放置 mp3 文件后，原始代码开始工作。这个 mp3 文件足够精简，可以在不检查解码状态的情况下运行，但我将使用 setDecodedCallback 来确保 100% 确保音频文件在使用前已解码。非常感谢您的帮助！

【参考方案2】：

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

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