表示モード

音を鳴らす ​

このページのサンプルコードをダウンロード

効果音と BGM ​

Akashic Engine のゲームで音を鳴らす場合は、一つの効果音や音楽につき次のいずれかの組み合わせのファイルを用意する必要があります。 これは、Web ページで音を再生する際に、利用可能な形式がブラウザごとに異なっているためです。

  • Ogg Vorbis 形式 (.ogg) と M4A 形式 (.m4a)
  • Ogg Vorbis 形式 (.ogg) と AAC 形式 (.aac)

ファイルが用意できたら se1.ogg と se1.m4a を audio ディレクトリに配置して、 akashic scan コマンドでアセットとして追加します。

sh
akashic scan asset
akashic scan asset

音声アセットはアセットの play() メソッドを呼び出して再生します。例えばファイルパスが "/audio/se1" の場合は、以下のコードで再生できます。 オーディオアセットの場合は拡張子抜きのファイルパスを指定することに注意してください。

javascript
scene.asset.getAudio("/audio/se1").play();
scene.asset.getAudio("/audio/se1").play();

INFO

アセット ID で指定する場合は、以下のコードで再生できます。

javascript
scene.asset.getAudio("se1").play();
scene.asset.getAudio("se1").play();

シーンで効果音を利用するには、他のアセットと同じようにシーンオブジェクトのパラメータオブジェクトにアセットのファイルパスを指定します。以下は画像のタップまたはクリックで効果音を再生する例です。

javascript
function main() {
  const scene = new g.Scene({
    game: g.game,
    assetPaths: ["/audio/se1"]
  });
  scene.onLoad.add(() => {
    const sprite = new g.Sprite({
      ... // 必要なプロパティ
    ]);
    sprite.onPointDown.add(() => {
      scene.asset.getAudio("/audio/se1").play();
    });
  });
  g.game.pushScene(scene);
}

module.exports = main;
function main() {
  const scene = new g.Scene({
    game: g.game,
    assetPaths: ["/audio/se1"]
  });
  scene.onLoad.add(() => {
    const sprite = new g.Sprite({
      ... // 必要なプロパティ
    ]);
    sprite.onPointDown.add(() => {
      scene.asset.getAudio("/audio/se1").play();
    });
  });
  g.game.pushScene(scene);
}

module.exports = main;

Akashic Engine では音声を自動的にループ再生させることで BGM を実現します。 BGM をループ再生させるには、game.json を編集して該当アセットの systemId プロパティの値を music に変更します。

例えば BGM として利用したいアセットの ID が bgm の場合、 akashic scan 直後は game.json の対応箇所は次のようになっています。

json
"bgm": {
  "type": "audio",
  "path": "audio/bgm",
  "systemId": "sound",
  "duration": 8000
}
"bgm": {
  "type": "audio",
  "path": "audio/bgm",
  "systemId": "sound",
  "duration": 8000
}

この部分を編集して以下のように "systemId": "music" を指定します。

json
"bgm": {
  "type": "audio",
  "path": "audio/bgm",
  "systemId": "music",
  "duration": 8000
}
"bgm": {
  "type": "audio",
  "path": "audio/bgm",
  "systemId": "music",
  "duration": 8000
}

BGM も play() メソッドで再生を開始します。 BGM は自動的にループ再生されるので、play() メソッドはシーンロード時に一度だけ呼び出します。

以下のプログラムは上で出てきた効果音再生プログラムに BGM を追加したものです。

TIP

Google Chrome や iOS 上の Safari ではユーザ操作 (クリックなど) があるまで音が鳴らないという仕様があります。ゲームの開始直後から BGM を再生するような場合は最初に一度以上ユーザ操作 (クリックなど) をさせるような作りにしてください。詳細は Tips » よくある落とし穴 » 一部の環境でゲーム開始時に自動的に音声が再生されない を参照してください。

javascript
function main() {
  const scene = new g.Scene({
    game: g.game,
    assetPaths: ["/audio/**/*"]
  });
  scene.onLoad.add(() => {
    const sprite = new g.Sprite({
      ... // 必要なプロパティ
    ]);
    sprite.onPointDown.add(() => {
      scene.asset.getAudio("/audio/se1").play();
    });
    scene.onPointDownCapture.add(() => {
      scene.asset.getAudio("/audio/bgm").play();
    });
  });
  g.game.pushScene(scene);
}

module.exports = main;
function main() {
  const scene = new g.Scene({
    game: g.game,
    assetPaths: ["/audio/**/*"]
  });
  scene.onLoad.add(() => {
    const sprite = new g.Sprite({
      ... // 必要なプロパティ
    ]);
    sprite.onPointDown.add(() => {
      scene.asset.getAudio("/audio/se1").play();
    });
    scene.onPointDownCapture.add(() => {
      scene.asset.getAudio("/audio/bgm").play();
    });
  });
  g.game.pushScene(scene);
}

module.exports = main;