# はじめよう

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

## 必要なもの {#requirements}

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

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

## インストール {#install}

```bash
npm i @debuffjp/earshot
```

## リスナーを作る {#create-a-listener}

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

```ts
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]` には素材の名前を入れるか、何も入れません。

## 音源を追加する {#add-a-source}

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

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

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

## ゲームループから更新する {#update-from-your-game-loop}

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

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

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

## 片付ける {#clean-up}

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

## 次に読むページ {#next}

- [サウンド](./sound)：壁、素材、リバーブ、調整。
- [ラウドネス](./loudness)：マイクをゲーム入力に使う。
- [ボイス](./voice)：ボイスチャットとルーム。
- [API](./api)：すべてのエクスポート。