recursal/MDN huggingface dataset:
AudioParam: setValueAtTime() メソッド
=================================

`setValueAtTime()` は `AudioParam` インターフェイスのメソッドで、 `AudioContext.currentTime` を基準にした正確な時刻に `AudioParam` の値を瞬時に変更します。新しい値は value 引数で指定します。

構文
--


```js
setValueAtTime(value, startTime)
```

### 引数

`value`

指定された時刻に AudioParam が変更される値を表す浮動小数点数です。

`startTime`

倍精度浮動小数点値で、 `AudioContext` が最初に作成されてから、値の変更が起こるまでの時間（秒単位）を表します。時間が `AudioContext.currentTime` より小さい場合、変更は即座に起こります。この値が負の場合、 `TypeError` が発生します。

### 返値

この `AudioParam` オブジェクトへの参照です。一部の古いブラウザーの実装では、このインターフェイスは `undefined` を返します。

例
-

この単純な例では、2つのコントロールボタンを持つメディア要素のソースが特徴です（ソースコードは webaudio-examples リポジトリーを参照するか、またはこの例をライブで表示してください）。ボタンが押されると、変数 `currGain` は 0.25 ずつ増加/減少します。次に、 `setValueAtTime()` メソッドを使用して、ゲインの値を `currGain` と等しく、現在から 1 秒後 (`audioCtx.currentTime + 1`) に設定します。


```js
// 音声コンテキストの作成
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

// 例のための基本的な値を設定
const myAudio = document.querySelector("audio");
const pre = document.querySelector("pre");
const myScript = document.querySelector("script");

pre.innerHTML = myScript.innerHTML;

const targetAtTimePlus = document.querySelector(".set-target-at-time-plus");
const targetAtTimeMinus = document.querySelector(".set-target-at-time-minus");

// MediaElementAudioSourceNode を作成
// Feed the HTMLMediaElement into it
const source = audioCtx.createMediaElementSource(myAudio);

// ゲインノードを作成し、ゲイン値を 0.5 に設定
const gainNode = audioCtx.createGain();
gainNode.gain.value = 0.5;
let currGain = gainNode.gain.value;

// AudioBufferSourceNode を gainNodeに、
// gainNode を出力先に接続
source.connect(gainNode);
gainNode.connect(audioCtx.destination);

// onclick で何かするようにボタンを設定
targetAtTimePlus.onclick = () => {
  currGain += 0.25;
  gainNode.gain.setValueAtTime(currGain, audioCtx.currentTime + 1);
};

targetAtTimeMinus.onclick = () => {
  currGain -= 0.25;
  gainNode.gain.setValueAtTime(currGain, audioCtx.currentTime + 1);
};
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioparam-setvalueattime |

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

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

関連情報
----

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

**`defaultValue`** は `AudioParam` インターフェイスの読み取り専用プロパティで、 `AudioParam` を作成する固有の `AudioNode` で定義する属性の初期値を表します。

値
-

浮動小数点数 (`Number`) です。

例
-


```js
const audioCtx = new AudioContext();
const gainNode = audioCtx.createGain();
const defaultVal = gainNode.gain.defaultValue;
console.log(defaultVal); // 1
console.log(defaultVal === gainNode.gain.value); // true
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioparam-defaultvalue |

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

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

関連情報
----

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

**`cancelAndHoldAtTime()`** は `AudioParam` インターフェイスのメソッドで、将来 `AudioParam` に予定されていた変更をすべてキャンセルしますが、指定された時刻に他のメソッドを使用してさらに変更が加えられるまでその値を保持します。

構文
--


```js
cancelAndHoldAtTime(cancelTime)
```

### 引数

`cancelTime`

すべてのスケジュールされた変更が取り消される、 `AudioContext` が最初に作成されてからからの時間（秒単位）を表します。

### 返値

呼び出された `AudioParam` への参照です。

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioparam-cancelandholdattime |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
AudioParam: cancelScheduledValues() メソッド
========================================

`cancelScheduledValues()` は `AudioParam` インターフェイスのメソッドで、 `AudioParam` に予定されている将来の変更をすべて取り消します。

構文
--


```js
cancelScheduledValues(startTime)
```

### 引数

`startTime`

`AudioContext` が最初に作成されてから、スケジュールされた変更がすべて取り消されるまでの時間（秒単位）を表します。

### 返値

この `AudioParam` オブジェクトへの参照です。古い実装では、このメソッドは `undefined` を返します。

例
-


```js
const gainNode = audioCtx.createGain();
gainNode.gain.setValueCurveAtTime(waveArray, audioCtx.currentTime, 2); // 'gain' は AudioParam
gainNode.gain.cancelScheduledValues(audioCtx.currentTime);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioparam-cancelscheduledvalues |

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

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

関連情報
----

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

`linearRampToValueAtTime()` は `AudioParam` インターフェイスのメソッドで、 `AudioParam` の値を徐々に線形的に変化させます。変更は *直前の* イベントで指定した時刻に始まり、 `value` 引数で指定された新しい値まで直線的なランプが続き、 `endTime` 引数で指定された時刻に新しい値に到達します。

構文
--


```js
linearRampToValueAtTime(value, endTime)
```

### 引数

`value`

浮動小数点数で、指定された時刻までに `AudioParam` が変化する値を表します。

`endTime`

倍精度浮動小数点値で、値の変化が開始してから停止するまでの正確な時間（秒単位）を表します。

### 返値

この `AudioParam` オブジェクトを参照します。一部のブラウザーでは、このインターフェイスの古い実装は `undefined` を返します。

例
-

この例では、 2 つの制御ボタンを持つメディアソースがあります（ソースコードは audio-param repo を参照するか、またはこの例をライブで見てください）。これらのボタンが押されると、 `linearRampToValueAtTime()` を使用して、それぞれゲイン値を 1.0 までフェードアップし、 0 までフェードダウンします。これはフェードイン/フェードアウトのエフェクトにはかなり有益ですが、 `AudioParam.exponentialRampToValueAtTime()` の方が少し自然だと言います。


```js
// 音声コンテキストの作成
const audioCtx = new AudioContext();

// 例のための基本的な値を設定
const myAudio = document.querySelector("audio");

const linearRampPlus = document.querySelector(".linear-ramp-plus");
const linearRampMinus = document.querySelector(".linear-ramp-minus");

// MediaElementAudioSourceNode を作成
// Feed the HTMLMediaElement into it
const source = audioCtx.createMediaElementSource(myAudio);

// ゲインノードを作成し、ゲイン値を 0.5 に設定
const gainNode = audioCtx.createGain();

// AudioBufferSourceNode を gainNodeに、
// gainNode を出力先に接続
gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
source.connect(gainNode);
gainNode.connect(audioCtx.destination);

// onclick で何かするようにボタンを設定
linearRampPlus.onclick = () => {
  gainNode.gain.linearRampToValueAtTime(1.0, audioCtx.currentTime + 2);
};

linearRampMinus.onclick = () => {
  gainNode.gain.linearRampToValueAtTime(0, audioCtx.currentTime + 2);
};
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioparam-linearramptovalueattime |

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

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

関連情報
----

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

**`exponentialRampToValueAtTime()`** は `AudioParam` インターフェイスのメソッドで、 `AudioParam` の値を指数関数的に徐々に変化させます。変更は *直前の* イベントで指定した時刻に始まり、`value` 引数で指定された新しい値まで指数関数的な変化が続き、 `endTime` 引数で指定された時刻に新しい値に到達します。

**メモ:** 指数関数的な変化は、周波数や再生レートを変化させる場合、直線的な変化よりも有益であると考えられています。これは、人間の耳の動作に起因しています。

構文
--


```js
exponentialRampToValueAtTime(value, endTime)
```

### 引数

`value`

浮動小数点数で、指定された時刻までに `AudioParam` が変化する値を表します。

`endTime`

倍精度浮動小数点値で、値の変化が停止する、変化開始後の正確な時刻（秒単位）を表します。

### 返値

この `AudioParam` オブジェクトへの参照です。一部のブラウザーでは、このインターフェイスの古い実装は `undefined` を返します。

例
-

この例では、 2 つの制御ボタンを持つメディアソースがあります（ソースコードは audio-param リポジトリー、またはこの例をライブで参照してください）。これらのボタンが押されると、 `exponentialRampToValueAtTime()` を使用して、それぞれゲイン値を 1.0 までフェードアップし、 0 までフェードダウンします。これはフェードイン/フェードアウトのエフェクトにかなり有益です。


```js
// 音声コンテキストの作成
const audioCtx = new AudioContext();

// 例のための基本的な変数を設定
const myAudio = document.querySelector("audio");

const expRampPlus = document.querySelector(".exp-ramp-plus");
const expRampMinus = document.querySelector(".exp-ramp-minus");

// MediaElementAudioSourceNode を作成
// HTMLMediaElement を投入します。
const source = audioCtx.createMediaElementSource(myAudio);

// ゲインノードを作成し、そのゲイン値を 0.5 に設定します。
const gainNode = audioCtx.createGain();

// AudioBufferSourceNode を gainNodeに、
// gainNode を出力先に接続します。
gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
source.connect(gainNode);
gainNode.connect(audioCtx.destination);

// onclick で何かするようにボタンを設定
expRampPlus.onclick = () => {
  gainNode.gain.exponentialRampToValueAtTime(1.0, audioCtx.currentTime + 2);
};

expRampMinus.onclick = () => {
  gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 2);
};
```


**メモ:** 最後の関数で降下する値には、 0 ではなく 0.01 が使用されました。 0 を使用すると、 *invalid or illegal string* エラーが発生するためです。

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioparam-exponentialramptovalueattime |

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

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

関連情報
----

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

`PictureInPictureWindow` の読み取り専用プロパティである **`height`** は、浮動動画ウィンドウの高さをピクセル単位で返します。

構文
--


```js
pictureInPictureWindow.height
```

### 値

整数で、浮動動画ウィンドウの高さをピクセル単位で示します。このプロパティは読み取り専用で、既定値はありません。

仕様書
---

| Specification |
| --- |
| Picture-in-Picture # ref-for-dom-pictureinpicturewindow-height |

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

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

関連情報
----

* ピクチャインピクチャ API
* `PictureInPictureWindow.width`
PictureInPictureWindow: resize イベント
===================================

**`resize`** イベントは、浮動動画ウィンドウのサイズが変更されたときに発行されます。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("resize", (event) => {});

onresize = (event) => {};
```

イベント型
-----

`PictureInPictureEvent` です。`Event` を継承しています。

Event

PictureInPictureEventイベントプロパティ
---------

*このインターフェイスには以下のプロパティに加え、親である `Event` から継承したプロパティもあります。*

`PictureInPictureEvent.pictureInPictureWindow` (en-US)

サイズが変更された `PictureInPictureWindow` を返します。

例
-

### ウィンドウのサイズをログ出力


```html
<p>Resize the floating video window to fire the <code>resize</code> event.</p>
<p>Window height: <span id="height"></span></p>
<p>Window width: <span id="width"></span></p>
<video id="video" src="" muted autoplay></video>
```



```js
const video = document.querySelector("#video");
const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");

function resize(evt) {
  heightOutput.textContent = evt.target.height;
  widthOutput.textContent = evt.target.width;
}

video.requestPictureInPicture().then((pictureInPictureWindow) => {
  pictureInPictureWindow.onresize = resize;
  // or
  pictureInPictureWindow.addEventListener("resize", resize);
});
```

仕様書
---

| Specification |
| --- |
| Picture-in-Picture # eventdef-pictureinpicturewindow-resize |
| Picture-in-Picture # dom-pictureinpicturewindow-onresize |

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

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

`PictureInPictureWindow` の読み取り専用プロパティである **`width`** は、浮動動画ウィンドウの幅をピクセル単位で返します。

構文
--


```js
pictureInPictureWindow.width
```

### 値

整数で、浮動動画ウィンドウの幅をピクセル単位で示します。このプロパティは読み取り専用で、既定値はありません。

仕様書
---

| Specification |
| --- |
| Picture-in-Picture # ref-for-dom-pictureinpicturewindow-width |

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

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

関連情報
----

* ピクチャインピクチャ API
* `PictureInPictureWindow.height`
BackgroundFetchEvent()
======================

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:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

コンストラクター **`BackgroundFetchEvent()`** は新しい `BackgroundFetchEvent` オブジェクトを生成します。このコンストラクタは通常、使用されることはありません。なぜなら、これらのオブジェクトはブラウザによって自動で生成され、バックグラウンドのフェッチイベントのコールバックに渡されるからです。

構文
--


```js
new BackgroundFetchEvent(type, options)
```

### 引数

`type`

 イベント名の文字列。
 大文字と小文字は区別されます。ブラウザーはこれを `backgroundfetchabort` または`backgroundfetchclick` に設定します。


`options`

*`ExtendableEvent()` で定義されたプロパティに加えて*、下記のプロパティを持つオブジェクト。

`registration`

`BackgroundFetchRegistration` オブジェクト。


### 返値

新しく生成された `BackgroundFetchEvent` オブジェクト。

仕様書
---

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchevent-backgroundfetchevent |

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

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

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:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`registration`** は `BackgroundFetchEvent` インターフェイスの読み取り専用プロパティで、 `BackgroundFetchRegistration` オブジェクトを返します。

値
-

`BackgroundFetchRegistration`。

例
-

以下の例では、ユーザーがダウンロードの進捗表示のUIをクリックすると、 `onbackgroundfetchclick` イベントが発火します。 `event.registration` を呼び出すと、現在の `BackgroundFetchRegistration` が返されます。


```js
addEventListener("backgroundfetchclick", (event) => {
  console.log(event.registration);
});
```

仕様書
---

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchevent-registration |

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

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

`data` は **`PushEvent`** インターフェイスの読み取り専用プロパティで、`PushSubscription` に送信されたデータを含む `PushMessageData` オブジェクトへの参照を返します。

値
-

`PushMessageData` オブジェクトです。

例
-

次の例は、 `PushEvent` からデータを取得して、すべてのサービスワーカークライアントで表示しています。


```js
self.addEventListener("push", (event) => {
  if (!(self.Notification && self.Notification.permission === "granted")) {
    return;
  }

  const data = event.data?.json() ?? {};
  const title = data.title || "Something Has Happened";
  const message =
    data.message || "Here's something you might want to check out.";
  const icon = "images/new-notification.png";

  const notification = new Notification(title, {
    body: message,
    tag: "simple-push-demo-notification",
    icon,
  });

  notification.addEventListener("click", () => {
    clients.openWindow(
      "https://example.blog.com/2015/03/04/something-new.html",
    );
  });
});
```

仕様書
---

| Specification |
| --- |
| Push API # dom-pushevent-data |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PushEvent: PushEvent() コンストラクター
===============================

**`PushEvent()`** コンストラクターは、新しい `PushEvent` オブジェクトを生成します。このコンストラクターは、サービスワーカーにのみ公開されていることに注意してください。

構文
--


```js
new PushEvent(type)
new PushEvent(type, options)
```

引数
--

`type`

 文字列で、イベントの名前を示します。
 大文字小文字の区別があり、ブラウザーは `push` または `pushsubscriptionchange` に設定します。


`options` 省略可

オブジェクトで、 *`ExtendableEvent()` で定義されているプロパティに加えて*、以下のプロパティを指定することができます。

`data`

`PushEvent` に格納したいデータ（もしあれば）。コンストラクターが呼び出されると、結果オブジェクトの `PushEvent.data` プロパティには、これらのバイト列を格納した新しい `PushMessageData` オブジェクトが設定されます。


### 返値

新しい `PushEvent` オブジェクトです。

例
-


```js
const dataInit = {
  data: "Some sample text",
};

const myPushEvent = new PushEvent("push", dataInit);

myPushEvent.data.text(); // 'Some sample text' を返す
```

仕様書
---

| Specification |
| --- |
| Push API # dom-pushevent-constructor |

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

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

関連情報
----

* プッシュ API
* サービスワーカー API
MIDIInput: midimessage イベント
===========================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

Web MIDI API の `midimessage` イベントは、この `MIDIInput` に対応する MIDI ポートで 1 個以上の MIDI メッセージの受信が完了した時発火します。受信したメッセージが格納された `MIDIMessageEvent` のインスタンスがイベントハンドラーに渡されます。

構文
--

`addEventListener()` のようなメソッドでイベント名を用いるか、イベントハンドラープロパティを設定します。


```js
addEventListener("midimessage", (event) => {});

onmidimessage = (event) => {};
```

イベント型
-----

`MIDIMessageEvent` です。`Event` を継承しています。

Event

MIDIMessageEventイベントプロパティ
---------

*このインターフェイスは `Event` からもプロパティを継承しています。*

`MIDIMessageEvent.data`

1 個の MIDI メッセージのデータバイト列が格納された `Uint8Array` です。構造の詳細については、MIDI の仕様書を参照してください。

例
-

以下の例では、すべての入力ポートで `midimessage` イベントを監視します。メッセージを受信したら、`MIDIMessageEvent.data` プロパティをコンソールに出力します。


```js
inputs.forEach((input) => {
  input.onmidimessage = (message) => {
    console.log(message.data);
  };
});
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # dom-midiinput-onmidimessage |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLAudioElement: Audio() コンストラクター
==================================

**`Audio()`** コンストラクターは新しい `HTMLAudioElement` を作成し返します。この要素は文書に取り付けてユーザーが操作したり聞いたりすることができますし、画面外で音声を管理したり再生したりするために使用することもできます。

構文
--


```js
new Audio()
new Audio(url)
```

### 引数

`url` 省略可

オプションで、新しい audio 要素に関連付ける音声ファイルの URL をの入った文字列。

### 返値

 新しい `HTMLAudioElement` オブジェクトで、`url` で指定したファイルの音声を再生するために使用するように構成されています。新しいオブジェクトの `preload` プロパティは `auto` に設定され、その `src` プロパティには指定した URL が入ります。URL が与えられなかったら `null` が設定されます。
 URL が指定された場合、ブラウザーは新しいオブジェクトを返す前に、非同期的にメディアリソースの読み込みを始めます。

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

他にも `document` オブジェクトの `createElement()` メソッドなど、要素を作成するためのメソッドを使用して、新しい `HTMLAudioElement` を構築することもできます。

### 再生を始めるタイミングを決める

音声ファイルが十分に読み込まれ、再生が開始されたことを確認する方法は 3 つあります。

* `readyState` プロパティの値を調べます。`HTMLMediaElement.HAVE_FUTURE_DATA` であれば、再生を始めるのに十分なデータがあり、少なくとも短時間は再生できます。`HTMLMediaElement.HAVE_ENOUGH_DATA` であれば、現在のダウンロードレートを指定された場合、音声を中断することなく最後まで再生できる十分なデータがあることを意味します。
* `canplay` イベントを待ち受けします。再生を始めるのに十分な音声が利用できると `<audio>` 要素に送られますが、中断されることもあります。
* `canplaythrough` イベントを待ち受けします。音声が中断することなく最後まで再生できると推測されるときに送られます。

イベントベースの方法が最適です。


```js
myAudioElement.addEventListener("canplaythrough", (event) => {
  /\* 権限があれば、音声が再生できるようになった \*/
  myAudioElement.play();
});
```

### メモリーの使用と管理

再生が行われている場合は、`Audio()` コンストラクターで作成した audio 要素への参照をすべて削除しても、JavaScript ランタイムのガベージコレクション機構によって要素自体がメモリーから削除されることはありません。その代わり、音声は再生され続け、オブジェクトは再生が終わるか（`pause()` が呼び出されるなどで）一時停止されるまでメモリーに残ります。その時点で、オブジェクトはガベージコレクションの対象となります。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-audio-dev |

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

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

関連情報
----

* ウェブメディア技術
* このインターフェイスを実装している HTML 要素: `<audio>`
EventSource.close()
===================

**`close()`** は `EventSource` インターフェイスのメソッドで、コネクションが構築されていればそれを閉じ、 `EventSource.readyState` 属性を `2` （接続終了）に設定します。

**メモ:** コネクションが既に閉じられていた場合、このメソッドは何も行いません。

構文
--


```js
close()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-


```js
const button = document.querySelector("button");
const evtSource = new EventSource("sse.php");

button.onclick = () => {
  console.log("Connection closed");
  evtSource.close();
};
```


**メモ:** 完全な例は GitHub で見られます。 PHP を用いた簡単な SSE のデモ を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-eventsource-close-dev |

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

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

関連情報
----

* `EventSource`
EventSource.withCredentials
===========================

**`withCredentials`** は `EventSource` インターフェイスの読み取り専用プロパティで、この `EventSource` オブジェクトが CORS 資格情報が設定してインスタンス化されたかどうかを示す論理値を返します。

値
-

この `EventSource` オブジェクトが CORS 資格情報を設定してインスタンス化されたのか (`true`) あるいはそうでないのか (`false`、既定値) を示す論理値です。

例
-


```js
const evtSource = new EventSource("sse.php");
console.log(evtSource.withCredentials);
```


**メモ:** 完全な例は GitHub で見られます。 PHP を用いた簡単な SSE のデモ を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-eventsource-withcredentials-dev |

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

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

関連情報
----

* `EventSource`
EventSource: message イベント
=========================

`message` は `EventSource` API のイベントで、イベントソースからデータを受け取ったときに発生します。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("message", (event) => {});

onmessage = (event) => {};
```

イベント型
-----

`MessageEvent` です。 `Event` を継承しています。

Event

MessageEventイベントプロパティ
---------

*このインターフェイスは親である `Event` からプロパティを継承しています。*

`MessageEvent.data` 読取専用 

メッセージ送信元によって送信されたデータです。

`MessageEvent.origin` 読取専用 

文字列で、メッセージ送信元のオリジンを表します。

`MessageEvent.lastEventId` 読取専用 

文字列で、このイベントの一意の ID を表します。

`MessageEvent.source` 読取専用 

`MessageEventSource` （`WindowProxy`、`MessagePort`、`ServiceWorker` の何れかのオブジェクト）で、メッセージの送信元を表します。

`MessageEvent.ports` 読取専用 

`MessagePort` オブジェクトの配列で、メッセージが送信されるチャンネルに関連するポートを表します（チャンネルメッセージングや、共有ワーカーにメッセージを送信する場合など、適切な場合）。

例
-

この基本的な例では、サーバーからイベントを受け取るために `EventSource` を作成し、 `sse.php` という名前のページがイベントを作成する役割を担っています。


```js
const evtSource = new EventSource("sse.php");
const eventList = document.querySelector("ul");

evtSource.addEventListener("message", (e) => {
  const newElement = document.createElement("li");

  newElement.textContent = `message: ${e.data}`;
  eventList.appendChild(newElement);
});
```

### onmessage による同等品


```js
evtSource.onmessage = (e) => {
  const newElement = document.createElement("li");

  newElement.textContent = `message: ${e.data}`;
  eventList.appendChild(newElement);
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-message |
| HTML Standard # handler-eventsource-onmessage |

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

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

関連情報
----

* サーバー送信イベントの使用
* `open`
* `error`
EventSource.readyState
======================

**`readyState`** は `EventSource` インターフェイスの読み取り専用プロパティで、コネクションの状態を表す数値を返します。

値
-

コネクションの状態を表す数値。使用可能な値は以下の通りです。

* `0` — 接続試行中
* `1` — 接続中
* `2` — 接続終了
例
-


```js
const evtSource = new EventSource("sse.php");
console.log(evtSource.readyState);
```


**メモ:** 完全な例は GitHub で見られます。 PHP を用いた簡単な SSE のデモ を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-eventsource-readystate-dev |

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

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

関連情報
----

* `EventSource`
EventSource()
=============

**`EventSource()`** コンストラクターは、リモートリソースを表す新しく作成された `EventSource` を返します。

構文
--


```js
new EventSource(url)
new EventSource(url, options)
```

### 引数

`url`

文字列で、イベント/メッセージを処理するリモートリソースの場所を表します。

`options` 省略可

新しいコネクションを構成するオプションを提供します。可能な項目は次のとおりです。

`withCredentials` 省略可

論理値で、既定値は `false` であり、 CORS の資格情報を `include` に設定すべきかどうかを示します。


例
-


```js
const evtSource = new EventSource("sse.php");
const eventList = document.querySelector("ul");

evtSource.onmessage = (e) => {
  const newElement = document.createElement("li");

  newElement.textContent = `message: ${e.data}`;
  eventList.appendChild(newElement);
};
```


**メモ:** 完全な例は GitHub で見られます。 PHP を用いた簡単な SSE のデモ を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-eventsource-dev |

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

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

関連情報
----

* `EventSource`
EventSource: error イベント
=======================

`error` は `EventSource` API のイベントで、イベントソースとのコネクションを開くのに失敗した場合に発生します。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("error", (event) => {});

onerror = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-


```js
const evtSource = new EventSource("sse.php");

// addEventListener 版
evtSource.addEventListener("error", (e) => {
  console.log("An error occurred while attempting to connect.");
});

// onerror 版
evtSource.onerror = (e) => {
  console.log("An error occurred while attempting to connect.");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-error |
| HTML Standard # handler-eventsource-onerror |

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

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

関連情報
----

* サーバー送信イベントの使用
* `open`
* `message`