<footer><div id=version></div></footer>

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #111;
  color: #eee;
  font: caption;
}

#version {
  position: absolute;
  left: 5px;
  top: 5px;
}

function init() {
  this.game.config.audio.disableWebAudio = true;

  this.music = Phaser.Sound.SoundManagerCreator.create(this.game);

  this.game.config.audio.disableWebAudio = false;
}

function preload() {
  this.load.audioSprite("sfx", "assets/audio/SoundEffects/fx_mixdown.json", [
    "assets/audio/SoundEffects/fx_mixdown.ogg",
    "assets/audio/SoundEffects/fx_mixdown.mp3"
  ]);

  this.game.config.audio.disableWebAudio = true;

  this.load.audio("overture", [
    "assets/audio/Ludwig van Beethoven - The Creatures of Prometheus, Op. 43/Overture.ogg",
    "assets/audio/Ludwig van Beethoven - The Creatures of Prometheus, Op. 43/Overture.mp3"
  ]);

  var rect = this.add
    .rectangle(0, 0, 480, 32, colors.hexColors.white)
    .setAlpha(0.2)
    .setOrigin(0, 0)
    .setScale(1, 0);

  var tween = this.add.tween({
    targets: rect,
    duration: 1000,
    ease: "Cubic.easeInOut",
    props: { alpha: 0.4 },
    loop: -1,
    yoyo: true
  });

  this.load
    .on("progress", function(p) {
      rect.setScale(p, 1);
    })
    .on("complete", function() {
      tween.stop();
      rect.destroy();
    });
}

function create() {
  console.log("sfx", this.cache.audio.get("sfx")); // -> AudioBuffer
  console.log("overture", this.cache.audio.get("overture")); // --> HTMLAudioElement[]

  this.add.text(240, 160, "👆 Tap/click", {
    font: "48px sans-serif",
    fill: colors.cssColors.red
  })
    .setOrigin(0.5);

  this.input
    .once("pointerdown", () => {
      this.music.play("overture");
    })
    .on("pointerdown", () => {
      this.sound.playAudioSprite("sfx", "meow");
    });
}

document.getElementById("version").textContent = "Phaser v" + Phaser.VERSION;

var game = new Phaser.Game({
  width: 480,
  height: 320,
  backgroundColor: colors.hexColors.navy,
  audio: {},
  scene: { init: init, preload: preload, create: create },
  loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  }
});