はじめよう

このページでは、インストールから、壁でこもる音を 1 つ鳴らすところまで進めます。

必要なもの

• Web Audio が使えるブラウザ。Earshot にランタイム依存はなく、オーディオコンテキストを渡せるエンジンなら、どれでも使えます。
• マイクを使う場合は HTTPS か localhost。iframe には allow="microphone" も必要です。

debuff を使っている場合は、debuff で使うに進んでください。壁をタイルマップから読み取れます。

インストール

npm i @debuffjp/earshot

リスナーを作る

リスナーはプレイヤーの耳です。pos は更新のたびにワールド座標で読み取られ、tile は 1 タイルが何ワールド単位かを表します。

import { createListener, wallsOnGrid } from "@debuffjp/earshot";

const ctx = new AudioContext(); // タップやキー入力で resume します。

const tiles = [
  [null, null, "solid", null, null],
  [null, null, "solid", null, null],
];

const ear = createListener(ctx, {
  tile: 16,
  pos: () => player,
  world: {
    wallsBetween: (a, b) => wallsOnGrid(tiles, a, b),
  },
});

wallsBetween が受け取る座標は、すでにタイル単位です。tiles[y][x] には素材の名前を入れるか、何も入れません。

音源を追加する

音源には任意の AudioNode を使えます。この例は、デコード済みのバッファをループ再生します。

const node = new AudioBufferSourceNode(ctx, { buffer: radioBuffer, loop: true });
const radio = ear.source(node, { pos: () => radioPosition });
node.start();

音源は最初の update() まで無音です。すぐに聞かせたい音は、追加した直後に ear.update() を呼んでください。

ゲームループから更新する

// 1 秒に 10〜20 回で十分です。
ear.update();

radio.state; // "audible" | "out-of-range" | "muted"
radio.mix?.cutoff; // 厚い壁 1 枚の向こうなら 1200

プレイヤーを壁の反対側に動かすと、ラジオの音はこもって小さくなります。radio.mix には聞こえ方を決める数値が入っているので、画面に表示したりテストしたりできます。

片付ける

radio.remove() は音源を 1 つ切り離します。入力ノードは引き続き使えます。ear.dispose() はすべての音源とリバーブを取り除きます。

次に読むページ

• サウンド：壁、素材、リバーブ、調整。
• ラウドネス：マイクをゲーム入力に使う。
• ボイス：ボイスチャットとルーム。
• API：すべてのエクスポート。