recursal/MDN huggingface dataset:
CSSKeyframesRule: deleteRule() メソッド
===================================

**`deleteRule()`** は `CSSKeyframeRule` インターフェイスのメソッドで、指定されたキーフレームセレクターに一致する `CSSKeyFrameRule` を削除します。

構文
--


```js
deleteRule(select)
```

### 引数

`select`

削除するルールのキーフレームセレクターの入った文字列です。次のうちのいずれかを指定します。

* 0% から 100% までのパーセント値をカンマで区切ったリスト
* または `from` か `to` のキーワード

なお、指定するキーフレームセレクターの値の数と順序は、対象となるキーフレームルールのものと一致していなければなりません。ホワイトスペースは無視されます。

### 返値

なし (`undefined`)。

例
-

 この CSS には keyframes アットルールがあります。これは `document.styleSheets[0].cssRules` で返される最初の `CSSRule` になります。
 `myRules[0]` は `CSSKeyframesRule` オブジェクトを返します。 `cssRules` プロパティは
 2 つのルールを持った `CSSRuleList` を返します。

`deleteRule()` でルールを 1 つ削除した後は、 `cssRules` プロパティはルールを 1 つ持った `CSSRuleList` を返します。


```css
@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
```



```js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // CSSKeyframesRule
keyframes.deleteRule("to");
console.log(keyframes.cssRules); // 1 つのルールを持った CSSRuleList を返す
```

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # dom-csskeyframesrule-deleterule |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
XRInputSource: targetRaySpace プロパティ
===================================

`XRInputSource` の **targetRaySpace`** プロパティは読み取り専用で、仮想空間におけるターゲット光線の位置と方向を表す `XRSpace` (en-US) （通常は `XRReferenceSpace`） を返します。その正の値はターゲット光線の原点の位置を示し、その方向はコントローラー機器自体の方向を示します。これらの値は、入力ソースの `targetRayMode` のコンテキストで解釈され、機器を入力ソースとして完全に解釈するために使用することができます。

仮想空間における入力コントローラーの位置と方向を表す `XRSpace` を取得するには、 `gripSpace` プロパティを使用してください。

値
-

`XRSpace` (en-US) オブジェクト—ふつうは `XRReferenceSpace` または `XRBoundedReferenceSpace` で、仮想空間における入力コントローラーの対象とする光線の位置と方向を表します。

返される `XRSpace` のネイティブの原点は、対象とする光線が射出される点に位置し、空間の方向は対象とする光線が向いている方向を示します。

使用上の注意
------

すべての入力ソースは、 `targetRayMode` に関係なく、有効な `targetRaySpace` を持ちます。しかし、この空間の正確な意味はモードによって異なります。

* すべての視線入力（`targetRayMode` の値が `gaze`）は、視線入力が視聴者の頭から決まりますので、対象とする視線空間として同じ `XRSpace` (en-US) オブジェクトを共有します。この共有空間は `XRSession` (en-US) メソッド `requestReferenceSpace()` が返す空間と同じ場所を表しますが、将来的な API の拡張を可能にするために異なるオブジェクトとして維持されます。
* トラッキングポインター入力（`targetRayMode` が `tracked-pointer` であるもの）によって報告されるターゲット視線空間は、実際には入力機器の正の空間位置と方向に基づいています。

フレームのレンダリング中に対象の光線の位置と方向を決定するには、 `XRFrame` (en-US) の `getPose()` (en-US) メソッドに渡し、返す `XRPose` (en-US) オブジェクトの `transform` (en-US) を使用して、必要な空間情報を収集します。

例
-

このコードでは、1 フレームに 1 回呼び出される関数の一部を示しています。この関数は、`null` ではない `targetRaySpace` を持つ入力を見ていきます。このプロパティに値が示す入力は、ユーザーから外側に対象とする光線を表します。

このような各入力に対して、この例では `targetRayMode` が `tracked-pointer` である入力を見ていきます。これは、その入力が実際には注視デバイス、画面タップ、マウスクリックではなく、ターゲティングデバイスを表すことを意図していることを示しています。トラッキングポインターの場合、関数 `myRenderTargetRayAsBeam()` が呼び出され、入力コントローラーの仮想位置から、ポインタが指している方向にビームをレンダリングします。

このコードは、仮想空間内でユーザーの手の位置を表すコントローラーやオブジェクトを描画したり、他にも入力関連のタスクを実行し続ける必要があります。


```js
function updateInputSources(session, frame, refSpace) {
  for (const source of session.getInputSources()) {
    const targetRayPose = frame.getPose(inputSource.targetRaySpace, refSpace);

    if (targetRayPose) {
      if (source.targetRayMode === "tracked-pointer") {
        myRenderTargetRayAsBeam(targetRayPose);
      }
    }

    // …
  }
}
```

仕様書
---

| Specification |
| --- |
| WebXR Device API # dom-xrinputsource-targetrayspace |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* WebXR 機器 API
* 入力と入力ソース (en-US)
* WebXR アプリケーションでのゲームパッドの使用
XRInputSource: gripSpace プロパティ
==============================

`XRInputSource` の **`gripSpace`** 読み取り専用プロパティは、ネイティブの原点がユーザーの手に保持している（またはユーザーの手の一部の）ように見える仮想オブジェクトのレンダリングに使用するポーズを追跡する `XRSpace` (en-US) を返します。 例えば、ユーザーが仮想の真っ直ぐな棒を持っている場合、この `XRSpace` のネイティブの原点は、ユーザーの拳のおおよその重心にあります。

値
-

仮想空間での入力機器の位置と向きを表す `XRSpace` (en-US) オブジェクトです。 機器の画像をシーンにレンダリングするのに適しています。 入力ソースが本質的に追跡できない場合、`gripSpace` は `null` です。 例えば、`targetRayMode` が `tracked-pointer` である入力のみが `gripSpace` を提供します。

コントローラーがまっすぐな棒のような形をしていて、ユーザーの拳で握られていると想像してみてください。 グリップ空間の本来の原点は、ユーザーの拳の重心にあり、ユーザーの手の位置を追跡します。

**左手のグリップ空間の座標系。**

![グリップ空間が、世界に対するプレーヤーの手のローカル座標系をどのように示しているかを示す図。](/ja/docs/Web/API/XRInputSource/gripSpace/gripspace-lefthand-light.svg)

**右手のグリップ空間の座標系。**

![グリップ空間が、世界に対するプレーヤーの手のローカル座標系をどのように示しているかを示す図。](/ja/docs/Web/API/XRInputSource/gripSpace/gripspace-righthand-light.svg)

上の図に示すように、座標系は次のように方向付けられています。

* x 軸は、ユーザーの手のひらに垂直であり、手の甲から外側に伸びる方向は、コントローラーがユーザーの右手にある場合は +X 、コントローラーが左手にある場合は -X です。
* z 軸は、棒の長さに沿い、ユーザーの手のひらに平行で、グリップの長さに沿います。 -Z はユーザーの親指の方向であり、+Z は反対方向です。
* y 軸は、他の 2 つの軸間の関係によって示されます。 いつものように、それは他の 2 つの軸の外積です（X 軸と Z 軸の両方から 90° 離れています）。
例
-

この例では、フレームレンダリングコールバックから取得した `gripSpace` を使用して、仮想環境でのコントローラーの位置と向きを表すメッシュをレンダリングします。


```js
for (const source in xrSession.inputSources) {
  if (source.gripSpace) {
    const gripPose = frame.getPose(source.gripSpace, xrRefSpace);

    if (gripPose) {
      myDrawMeshUsingTransform(controllerMesh, gripPose.transform.matrix);
    }
  }
}
```


このループは、`gripSpace` の値を持つ各入力ソースについて、`gripSpace` によって記述される位置と向きを表す `XRPose` (en-US) を取得します。 有効なポーズが返された場合、メソッド `myDrawMeshUsingTransform()` を呼び出して、グリップポーズの変換行列を使用して変換されたコントローラーのメッシュを描画します。

仕様
--

| Specification |
| --- |
| WebXR Device API # dom-xrinputsource-gripspace |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
XRInputSource: targetRayMode プロパティ
==================================

`XRInputSource` の **`targetRayMode`** プロパティは読み取り専用で、入力ソースのターゲット光線を生成する方法と、それをユーザーに提示する方法を示します。

一般的には、ターゲティングシステムのソースから、ユーザーが見ている、または指している方向のターゲット光線に沿って、ターゲット光線が描かれます。光線のスタイルは一般的に自由で、光線の終点を示す方法も自由です。ターゲットとなるポイントやオブジェクトは、図形を描いたり、ターゲットとなる表面やオブジェクトをハイライトすることで示されるかもしれません。

ターゲット光線はハンドコントローラーが影響します。

![ハンドコントローラからターゲット光線を照射している画面](/ja/docs/Web/API/XRInputSource/targetRayMode/example-target-ray.gif)

ターゲット光線は、単純な線（理想的には距離に応じて消えていく）から、上のスクリーンショットにあるような SF の「フェイザー」スタイルのようなアニメーション効果まで、さまざまなものがあります。

値
-

ターゲット光線を生成してユーザーに提示する際に、どの方法を使用するかを示す文字列です。指定できる値は次の通りです。

`gaze` (視線)

ユーザーは、ユーザーが見ている方向を検出する視線追跡システム（または**視線入力**）を使用しています。 ターゲット光線は、ビューアーの目を起点として描画され、ビューアーが見ている方向に追従します。

`screen` (画面)

ターゲット光線の方向は、タッチスクリーン、マウス、またはその他の触覚入力機器をタップして示します。

`tracked-pointer` (追跡ポインター)

ターゲティングは、ユーザーがターゲットの方向に向けるハンドヘルド機器またはハンドトラッキングシステムを使用して行われます。 ターゲット光線は、手 (または手の中のオブジェクト) からターゲット方向に伸びます。方向はプラットフォーム固有のルールを使用して決定されますが、そのようなルールが存在しない場合は、ユーザーが人差し指を手からまっすぐに向けていると仮定して方向が選択されます。

使用上の注意
------

入力ソースの `targetRaySpace` は、ターゲット光線の位置と向きを示し、光線をレンダリングする場所を決定するために使用できます。

例
-

このコードの断片は、フレームごとに 1 回呼び出される関数の一部を示しています。 `null` 以外の `targetRaySpace` を持つ入力を探します。 このプロパティの値を持つ入力は、ターゲット光線をユーザーから外側に投影する入力を表します。

このような入力ごとに、この例では、 `targetRayMode` が `tracked-pointer` である入力を探します。 これは、入力が実際には、視線入力機器、画面タップ、またはマウスクリックではなく、ターゲティング機器を表すことを目的としていることを示しています。 追跡ポインターの場合、関数 `myRenderTargetRayAsBeam()` が呼び出され、入力コントローラーの仮想位置から、それが指している方向に外側にビームをレンダリングします。

コードは、仮想空間でのユーザーの手の位置を表すコントローラーや任意のオブジェクトの描画、その他の入力関連のタスクなどを引き続き実行する必要があります。


```js
function updateInputSources(session, frame, refSpace) {
  for (const source of session.getInputSources()) {
    const targetRayPose = frame.getPose(inputSource.targetRaySpace, refSpace);

    if (targetRayPose) {
      if (source.targetRayMode === "tracked-pointer") {
        myRenderTargetRayAsBeam(targetRayPose);
      }
    }

    // …
  }
}
```


詳細とより完全な例については、入力と入力ソース (en-US)の記事を参照してください。

仕様書
---

| Specification |
| --- |
| WebXR Device API # dom-xrinputsource-targetraymode |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* WebXR 機器 API
* 入力と入力ソース (en-US)
* WebXR アプリケーションでのゲームパッドの使用
XRInputSource: hand プロパティ
=========================

**`hand`** は `XRInputSource` インターフェイスの読み取り専用プロパティで、ハンドトラッキング機器へのあくせすを提供する `XRHand` (en-US) オブジェクトです。

値
-

`XRHand` (en-US) オブジェクト、または `XRSession` (en-US) が `hand-tracking` 機能記述子でリクエスト (en-US)されていない場合は `null` です。

例
-


```js
navigator.xr
  .requestSession({ optionalFeatures: ["hand-tracking"] })
  .then(/\* … \*/);

function renderFrame(session, frame) {
  // …

  for (const inputSource of session.inputSources) {
    if (inputSource.hand) {
      // render a hand model, perform gesture detection, etc.
    }
  }
}
```

仕様書
---

| Specification |
| --- |
| WebXR Hand Input Module - Level 1 # dom-xrinputsource-hand |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `XRHand` (en-US)
XRInputSource: handedness プロパティ
===============================

`XRInputSource` の **`handedness`** は読み取り専用プロパティで、WebXR 入力ソースがユーザーのどの手に関連付けられているか、またはまったく関連付けられていないかを示します。

値
-

文字列で、入力コントローラーがユーザーの手に握られているかどうか、もしそうならばどちらの手なのかを表します。値は次のうちの一つです。

`none`

入力コントローラーは、ユーザーのいずれの手にも関連付けられていません。

`left`

入力コントローラーは、ユーザーの左手に握られているか、着用されているか、取り付けられています。

`right`

入力コントローラーは、ユーザーの右手に握られているか、着用されているか、取り付けられています。

使用上の注意
------

入力ソースがユーザーの手に関連付けられた機器でない場合（握られているか、取り付けられているか、着用されているかに関係なく）、`handedness` の値は `none` です。 これは、例えば、ヘッドセットに組み込まれたコントロールや、頭や体に取り付けられた入力機器など、手で持つものではない入力ソースを示している場合があります。

例
-

`handedness` の重要な使用方法の 1 つは、コントローラーがどちらの手にあるかを判別して、仮想空間でその手（またはその手が制御している機器）の表現を描画できるようにすることです。


```js
function updateInputSources(session, frame, refSpace) {
  for (const source of session.inputSources) {
    if (source.gripSpace) {
      const gripPose = frame.getPose(source.gripSpace, refSpace);

      if (gripPose) {
        myRenderHandObject(gripPose, inputSource.handedness);
      }
    }
  }
}
```


この関数は、すべてのアニメーションフレームで（または必要な滑らかさの程度とパフォーマンスの制約に応じて定期的に）呼び出され、入力ソースのリストをスキャンして、 `gripSpace` が `null` ではないものを探します。 `gripSpace` が存在する場合、それは入力ソースが何らかのハンドヘルド機器であることを意味するため、可能であれば視覚的にレンダリングする必要があります。

`gripSpace` が `null` 以外の場合、この関数は、現在の参照空間に変換された `gripSpace` のポーズを取得します。 それが有効であると仮定すると、`myRenderHandObject()` と呼ばれる関数が、グリップのポーズと `handedness` の値を使用して呼び出されます。そして、正しい手に配置され形成された適切なモデルを描画します。

仕様書
---

| Specification |
| --- |
| WebXR Device API # dom-xrinputsource-handedness |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* WebXR 機器 API
* 入力と入力ソース (en-US)
* WebXR アプリケーションでのゲームパッドの使用
XRInputSource: profiles プロパティ
=============================

`XRInputSource` の **`profiles`** は読み取り専用プロパティで、文字列の配列を返します。 各文字列は、入力ソースの構成プロファイルを記述します。 プロファイル文字列は、具体性の高い順にリストされ、最も具体的なプロファイルが最初にリストされます。

**メモ:** WebXR セッションがインラインモードの場合、`profiles` リストは常に空です。

値
-

`XRInputSource` オブジェクトが表す入力機器の構成プロファイルをそれぞれ記述した文字列の配列。 各入力プロファイルは、入力ソースの好ましい視覚的表現と振る舞いを指定します。

### 入力プロファイル名

入力プロファイル名は、入力ソースが使用するように構成できる視覚的表現と振る舞いを説明する文字列です。 各文字列は、

* スペースはありません。 代わりに、単語はハイフン（"-"）文字で区切られます。
* プラットフォームがそれを利用可能にする場合、USB のベンダー ID と製品 ID が提供される場合がありますが、信頼することはできません。
* 特定の機器を一意に識別しません。 むしろ、製品が使用できる構成を識別します。
* 該当する場合、機器の handedness に関する情報を提供しません。

WebXR 入力プロファイルレジストリー（WebXR Input Profiles Registry）は、機器開発者とブラウザー開発者が、使用するブラウザーや他のユーザーエージェントに関係なく、特定の機器が同じプロファイル文字列を報告するようにするために使用します。

### 一般的な入力プロファイル名

以下の入力プロファイル名は一般的なもので、機器を最も大まかな意味で記述するフォールバックとして機能します。

* generic-button
* generic-hand-select-grasp
* generic-hand-select
* generic-hand
* generic-touchpad
* generic-touchscreen
* generic-trigger-squeeze-thumbstick
* generic-trigger-squeeze-touchpad-thumbstick
* generic-trigger-squeeze-touchpad
* generic-trigger-squeeze
* generic-trigger-thumbstick
* generic-trigger-touchpad-thumbstick
* generic-trigger-touchpad
* generic-trigger
例
-

profiles` のリストは、詳細度の逆順です。つまり、最も詳細な記述が最初で、最も詳細でない記述は最後です。リストの最初の項目は、通常、コントローラーの正確なモデル、またはコントローラーと互換性のあるモデルを示します。

例えば、Oculus Touch コントローラーの `profiles` の項目 0 は `oculus-touch` です。次の項目は `generic-trigger-squeeze-thumbstick` で、トリガー、スクイーズコントロール、サムスティックを備えた一般的な機器を示しています。 Oculus Touch コントローラーは実際にはサムスティックではなくサムパッドがありますが、全体的な記述が「十分に近い」ので、名前に照合するプロファイル内の詳細がコントローラを有益に解釈します。


```js
inputSource.profiles;
// ['oculus-touch', 'generic-trigger-squeeze-thumbstick']
```

仕様
--

| Specification |
| --- |
| WebXR Device API # dom-xrinputsource-profiles |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* WebXR 機器 API
* 入力と入力ソース (en-US)
XRInputSource: gamepad プロパティ
============================

読み取り専用の `XRInputSource` の **`gamepad`** プロパティは、 XR 入力ソースがゲームパッドまたは同等の機器である場合、ボタンと軸の状態を記述した `Gamepad` オブジェクトを返します。機器がゲームパッドのようなものでない場合、このプロパティの値は `null` です。

返される `Gamepad` インスタンスはゲームパッド API で説明されているとおりに動作します。ただし、いくつか注意すべきことがあります。

* `XRInputSource` に属する `Gamepad` インスタンスは `navigator.getGamepads()` が返す配列には含まれません。ゲームパッドは厳密に WebXR ハードウェアに関連付けられるものであり、汎用のゲーム機器ではありません。
* `Gamepad.id` は空文字列 (`""`) です。
* `Gamepad.index` は `-1` です。
* `Gamepad.connected` は `XRInputSource` がアクティブな XR 入力ソースのリストから除去されるか、 `XRSession` (en-US) が終わるまでは `true` です。
* `Gamepad.axes` で報告される軸がタッチパッドの軸を表す場合、関連する `GamepadButton.touched` プロパティが `false` のとき、値は 0 になります。
* `Gamepad.mapping` は "xr-standard" を返します。
例
-

### gamepad 入力ソースの使用


```js
for (const source of frame.session.inputSources) {
  const gamepad = source.gamepad;
  if (gamepad) {
    if (gamepad.buttons[2].pressed) {
      // 何かする
    }
  }
}
```

仕様書
---

| Specification |
| --- |
| WebXR Gamepads Module - Level 1 # dom-xrinputsource-gamepad |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ToggleEvent: oldState プロパティ
===========================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`oldState`** は `ToggleEvent` インターフェイスの読み取り専用プロパティで、この要素が遷移する前の状態を表す文字列です。

値
-

文字列です。取りうる値は `"open"`（ポップオーバーが表示されている）または `"closed"`（ポップオーバーが非表示になっている）です。

例
-


```js
const popover = document.getElementById("mypopover");

// ...

popover.addEventListener("beforetoggle", (event) => {
  if (event.oldState === "open") {
    console.log("Popover is being hidden");
  } else {
    console.log("Popover is being shown");
  }
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-toggleevent-oldstate |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ポップオーバー API
ToggleEvent: newState プロパティ
===========================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`newState`** は `ToggleEvent` インターフェイスの読み取り専用プロパティで、この要素が遷移した後の状態を表す文字列です。

値
-

文字列です。取りうる値は `"open"`（ポップオーバーが表示されている）または `"closed"`（ポップオーバーが非表示になっている）です。

例
-


```js
const popover = document.getElementById("mypopover");

// ...

popover.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Popover is being shown");
  } else {
    console.log("Popover is being hidden");
  }
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-toggleevent-newstate |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ポップオーバー API
ToggleEvent: ToggleEvent() コンストラクター
===================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`ToggleEvent()`** コンストラクターは、新しい `ToggleEvent` オブジェクトを生成します。

構文
--


```js
new ToggleEvent(type, init)
```

### 引数

`type`

文字列で、イベントの方を表します。`ToggleEvent` の場合、これは常に `toggleevent` です。

`init`

以下のプロパティを持つオブジェクトです。

`newState`

文字列で、この要素が遷移した後の状態を表します。取りうる値は `"open"` および `"closed"` です。

`oldState`

文字列で、この要素が遷移する前の状態を表します。取りうる値は `"open"` および `"closed"` です。


例
-

開発者がこのコンストラクタを手動で使用することはないでしょう。関連するイベントが発行された結果、ハンドラーが呼び出されると、新しい `ToggleEvent` オブジェクトが生成されます。

例えば次の通りです。


```js
const popover = document.getElementById("mypopover");

// ...

popover.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Popover is being shown");
  } else {
    console.log("Popover is being hidden");
  }
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # toggleevent |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ポップオーバー API
AnalyserNode: AnalyserNode() コンストラクター
=====================================

**`AnalyserNode()`** はウェブオーディオ API のコンストラクターで、新しい `AnalyserNode` オブジェクトインスタンスを生成します。

構文
--


```js
new AnalyserNode(context)
new AnalyserNode(context, options)
```

### 引数

`context`

`AudioContext` または `OfflineAudioContext` への参照です。

`options` 省略可

以下のプロパティを持つオブジェクトです。すべて省略可能です。

`fftSize`

周波数領域を解析するための FFT の望ましい初期サイズです。
 既定値は `2048` です。


`maxDecibels`

 FFT 解析のための dB 単位の望ましい初期最大出力です。
 既定値は `-30` です。


`minDecibels`

 FFT 解析のための dB 単位の望ましい初期最小出力です。
 既定値は `-100` です。


`smoothingTimeConstant`

FFT 解析のための望ましい初期スムーズ化定数です。既定値は `0.8` です。

`channelCount`

 ノードへの任意の入力へのアップミキシングとダウンミキシング接続時に使用するチャンネル数を決定するための整数を表します。（詳しくは `AudioNode.channelCount` を参照してください。）Its usage and precise definition depend on the value of `channelCountMode`.
 使い方や正確な定義は `channelCountMode` の値に依存します。


`channelCountMode`

ノードの入出力間でチャンネルを一致させる方法を記述する列挙値を表します。（既定など、詳細は`AudioNode.channelCountMode`を参照してください。）

`channelInterpretation`

 チャンネルの意味を記述する列挙値を表します。この解釈は音声のアップミキシングとダウンミキシングがどのように行われるかを定義します。
 使用可能な値は `"speakers"` または `"discrete"` です。（既定値など、詳しくは `AudioNode.channelCountMode` を参照してください。）



仕様書
---

| Specification |
| --- |
| Web Audio API # dom-analysernode-analysernode |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `BaseAudioContext.createAnalyser()`、同様のファクトリーメソッド
AnalyserNode: fftSize プロパティ
===========================

**`fftSize`** は `AnalyserNode` インターフェイスのプロパティで、このプロパティは符号なし long 値で、周波数領域データを取得するために高速フーリエ変換 (FFT) を行う際に使用するウィンドウサイズをサンプル数で表します。

値
-

符号なし整数で、FFT のウィンドウサイズをサンプル数で表します。値を大きくすると、周波数領域での精度は高くなりますが、振幅領域での精度は低くなります。

2 のべき乗で、 2^5 と 2^15 の間でなければなりません。すなわち `32`, `64`, `128`, `256`, `512`, `1024`, `2048`, `4096`, `8192`, `16384`, `32768` のいずれかです。既定値は `2048` です。

### 例外

`IndexSizeError` `DOMException`

設定した値が 2 のべき乗でないか、許容範囲外である場合に発生します。

例
-

 次の例では、 `AudioContext` で `AnalyserNode` を作成し、 `requestAnimationFrame` と `<canvas>` で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。
 より完全な応用例/情報については、 Voice-change-O-matic のデモを調べてください（関連するコードは app.js の 108 ～ 193 行目を参照）。


```js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();

// …

analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

// draw an oscilloscope of the current audio source

function draw() {
  drawVisual = requestAnimationFrame(draw);

  analyser.getByteTimeDomainData(dataArray);

  canvasCtx.fillStyle = "rgb(200, 200, 200)";
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  canvasCtx.lineWidth = 2;
  canvasCtx.strokeStyle = "rgb(0, 0, 0)";

  canvasCtx.beginPath();

  const sliceWidth = (WIDTH \* 1.0) / bufferLength;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    const v = dataArray[i] / 128.0;
    const y = (v \* HEIGHT) / 2;

    if (i === 0) {
      canvasCtx.moveTo(x, y);
    } else {
      canvasCtx.lineTo(x, y);
    }

    x += sliceWidth;
  }

  canvasCtx.lineTo(canvas.width, canvas.height / 2);
  canvasCtx.stroke();
}

draw();
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-analysernode-fftsize |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブオーディオ API の使用
AnalyserNode: frequencyBinCount プロパティ
=====================================

**`frequencyBinCount`** は `AnalyserNode` インターフェイスの読み取り専用プロパティで、 `AudioContext` の `sampleRate` で利用可能なデータポイントの総数が格納されます。これは `AnalyserNode.fftSize` の `value` の半分です。 2 つのメソッドのインデックスは、0 からナイキスト周波数の間で、それらが表す周波数と線形関係にあります。

値
-

符号なし整数で、指定された `TypedArray` にコピーされる `AnalyserNode.getByteFrequencyData()` と `AnalyserNode.getFloatFrequencyData()` が値の数に等しいものです。

高速フーリエ変換を定義する方法に関する技術的な理由から，常に `AnalyserNode.fftSize` の半分の値になります．したがって、 `16`, `32`, `64`, `128`, `256`, `512`, `1024`, `2048`, `4096`, `8192`, `16384` のうちのいずれかになります。

例
-

 次の例では、 `AudioContext` で `AnalyserNode` を作成し、 `requestAnimationFrame` と `<canvas>` で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。
 より完全な応用例/情報については、 Voice-change-O-matic のデモを調べてください（関連するコードは app.js の 108 ～ 193 行目を参照）。


```js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;

// …

analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
const dataArray = new Uint8Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

function draw() {
  drawVisual = requestAnimationFrame(draw);

  analyser.getByteFrequencyData(dataArray);

  canvasCtx.fillStyle = "rgb(0, 0, 0)";
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  const barWidth = (WIDTH / bufferLength) \* 2.5 - 1;
  let barHeight;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];

    canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
    canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);

    x += barWidth;
  }
}

draw();
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-analysernode-frequencybincount |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブオーディオ API の使用
AnalyserNode: getByteFrequencyData() メソッド
=========================================

**`getByteFrequencyData()`** は `AnalyserNode` インターフェースのメソッドで、渡された `Uint8Array` （符号なしバイト配列）に現在の周波数データをコピーします．

周波数データは、 0 から 255 まで の範囲の整数で構成されます。

配列の各項目は、固有の周波数のデシベル値を表します。周波数はサンプルレートの 0 から 1/2 まで直線的に広がります。例えば、サンプルレートが `48000` の場合、配列の最後の項目は `24000` Hz のデシベル値を表します。

配列の持つ要素が `AnalyserNode.fftSize` より少なかった場合、余分な要素は削除されます。必要以上の要素があった場合、余分な要素は無視されます。

構文
--


```js
getByteFrequencyData(array)
```

### 引数

`array`

 周波数領域データがコピーされる `Uint8Array`。無音のサンプルの場合、値は `-Infinity` です。
 配列の持つ要素が `AnalyserNode.fftSize` より少なかった場合、余分な要素は削除されます。必要以上の要素があった場合、余分な要素は無視されます。


### 返値

なし (`undefined`)。

例
-

 次の例では、 `AudioContext` で `AnalyserNode` を作成し、 `requestAnimationFrame` と `<canvas>` で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。
 より完全な応用例/情報については、 Voice-change-O-matic のデモを調べてください（関連するコードは app.js の 108 ～ 193 行目を参照）。


```js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();

// …

analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
const dataArray = new Uint8Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

function draw() {
  drawVisual = requestAnimationFrame(draw);

  analyser.getByteFrequencyData(dataArray);

  canvasCtx.fillStyle = "rgb(0, 0, 0)";
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  const barWidth = (WIDTH / bufferLength) \* 2.5;
  let barHeight;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];

    canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
    canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);

    x += barWidth + 1;
  }
}

draw();
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-analysernode-getbytefrequencydata |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブオーディオ API の使用