MediaStreamTrack: mute イベント

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2018年3月以降、すべてのブラウザーで利用可能です。

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

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

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

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

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

構文

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

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

onmute = (event) => {};

イベント型

一般的な Event です。

例

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

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 イベントを設定するために利用できます。以下の例ではこれを示しています。

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

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

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

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

// 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 の記事を参照してください。