MediaStreamTrack: mute イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.

mute イベントは、トラックのソースが一時的にメディアデータを提供することができなくなったときに MediaStreamTrack へ送られます。

トラックがメディア出力可能になると、 unmute が送られます。

mute イベントと unmute イベントとの間で、トラックの muted プロパティの値は true になります。

メモ: 多くの人が「ミュート」と考える状態（すなわち、トラックを無音にすることをユーザーが制御できる方法）は実際には MediaStreamTrack.enabled プロパティを使用して管理され、こちらではイベントが発生しません。

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

構文

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

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

onmute = (event) => {};

イベント型

一般的な Event です。

例

この例では、イベントハンドラーを mute および unmute の各イベントに設定し、 MediaStreamTrack が入った変数 musicTrack のソースからメディアが流れていない場合を検出しています。

js
musicTrack.addEventListener(
  "mute",
  (event) => {
    document.getElementById("timeline-widget").style.backgroundColor = "#aaa";
  },
  false,
);

musicTrack.addEventListener(
  "unmute",
  (event) => {
    document.getElementById("timeline-widget").style.backgroundColor = "#fff";
  },
  false,
);

これらのイベントハンドラーのある場面で、トラック musicTrack が muted の状態になったとき、 timeline-widget の ID を持った要素の背景色が #aaa に変化します。トラックのミュート状態を抜けたことを — unmute イベントが到着したことによって — 検出すると、背景色は白に戻ります。

onmute イベントハンドラープロパティを使用してこのイベントのハンドラーを設定することもできます。同様に、 onunmute イベントハンドラープロパティが unmute イベントを設定するために利用できます。以下の例ではこれを示しています。

js
musicTrack.onmute = event => {
  document.getElementById("timeline-widget").style.backgroundColor = "#aaa";
}

musicTrack.onunmute = event = > {
  document.getElementById("timeline-widget").style.backgroundColor = "#fff";
}

レシーバーによるトラックのミュート

次の例は、レシーバーを使用してトラックをミュートする方法です。

js
// Peer 1 (Receiver)
audioTrack.addEventListener("mute", (event) => {
  // Do something in UI
});

videoTrack.addEventListener("mute", (event) => {
  // Do something in UI
});

// Peer 2 (Sender)
const transceivers = peer.getTransceivers();

const audioTrack = transceivers[0];
audioTrack.direction = "recvonly";

const videoTrack = transceivers[1];
videoTrack.direction = "recvonly";

transceivers は RTCRtpTransceiver の配列で、送受信される音声または映像トラックを見つけることができます。詳しくは direction の記事を参照してください。

仕様書

Specification
Media Capture and Streams
# dom-mediastreamtrack-onmute

ブラウザーの互換性

BCD tables only load in the browser

関連情報