上QQ阅读APP看书，第一时间看更新
2.2.3 MediaStreamTrack事件
1. ended事件
当媒体轨道结束时，触发该事件，此时属性readyState取值变为ended，对应事件句柄onended。
以下情况会触发该事件。
- 媒体源没有更多数据。
- 用户注销了相关媒体设备的访问权限。
- 媒体源设备被移除。
- 当媒体源来自对等端时，意味着对等端永久性终止了数据发送。
代码清单2-19使用addEventListener监听ended事件，并在触发该事件时改变对应的图标。
代码清单2-19 ended事件示例
track.addEventListener('ended', () => {
let statusElem = document.getElementById("status-icon");
statusElem.src = "/images/stopped-icon.png";
})
为onended事件句柄设置处理函数也可以达到同样的目的，如代码清单2-20所示。
代码清单2-20 onended事件句柄示例
track.onended = () => {
let statusElem = document.getElementById("status-icon");
statusElem.src = "/images/stopped-icon.png";
}
2. mute事件
当属性mute被设置为true时触发该事件，表明媒体轨道暂时不能提供数据，对应事件句柄onmute。
代码清单2-21使用addEventListener监听mute事件，在事件触发时改变指定ID元素的背景色。
代码清单2-21 mute事件示例
musicTrack.addEventListener("mute", event => {
document.getElementById("timeline-widget").style.backgroundColor = "#aaa";
}, false);
为onmute事件句柄设置处理函数也可以达到同样的目的，如代码清单2-22所示。
代码清单2-22 onmute事件句柄示例
musicTrack.onmute = (event) => {
document.getElementById("timeline-widget").style.backgroundColor = "#aaa";
}
3. unmute事件
当取消静音状态时触发该事件，表明媒体轨道可以正常提供数据，对应事件句柄onunmute。
代码清单2-23使用addEventListener监听unmute事件，在事件触发时改变指定ID元素的背景色。
代码清单2-23 unmute事件示例
musicTrack.addEventListener("unmute", event => {
document.getElementById("timeline-widget").style.backgroundColor = "#fff";
}, false);
为onunmute事件句柄设置处理函数也可以达到同样的目的，如代码清单2-24所示。
代码清单2-24 onunmute事件句柄示例
musicTrack.onunmute = (event) => {
document.getElementById("timeline-widget").style.backgroundColor = "#fff";
}