MediaStreamTrack: unmute イベント

Baseline 広く利用可能

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

unmute イベントは、トラックのソースが休止時間の後、再びメディアデータを提供するようになると MediaStreamTrack に送られます。

これは mute で始まった muted の状態を終了します。

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

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

構文

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

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

onunmute = (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 に変化します。トラックのミュート状態を抜けたことを — unmuted イベントが到着したことによって — 検出すると、背景色は白に戻ります。

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

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

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

レシーバーでトラックのミュートを解除する

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

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

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

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

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

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

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