MediaStreamTrack: unmute イベント

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.

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

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

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

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

構文

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

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

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

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

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

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

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

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

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

仕様書

Specification
Media Capture and Streams
# event-mediastreamtrack-unmute

ブラウザーの互換性

BCD tables only load in the browser

関連情報