MediaStreamTrack: mute 事件

当音轨的来源暂时无法提供媒体数据时，将向 MediaStreamTrack 发送 mute 事件。

当音轨再次能够产生媒体输出时，将发送 unmute 事件。

在 mute 事件和 unmute 事件之间的时间内，音轨的 muted 属性的值为 true。

注意：大多数人认为的“静音”（即用户切换静音音轨的状态）实际上是使用 MediaStreamTrack.enabled 属性管理的，该属性没有事件。

此事件不可取消，也不冒泡。

语法

在像 addEventListener() 这样的方法中使用事件名称，或设置事件处理程序属性。

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

onmute = (event) => {};

事件类型

一个通用的 Event。

示例

在这个例子中，为 mute 和 unmute 事件建立了事件处理程序，以便检测 musicTrack 引用的 MediaStreamTrack 的来源何时无法流出媒体。

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 状态时，ID 为 timeline-widget 的元素的背景颜色将更改为 #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 文章。

规范

规范
媒体捕获和流 # dom-mediastreamtrack-onmute

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

unmute 事件
direction