如何配置媒体控件的密钥 (HTML)(Windows 8)

项目
02/12/2016

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

本教程介绍如何在键盘上配置硬件媒体键，然后使用配置的键，通过按下或单击播放、暂停等键控制音频视频 (AV) 流。

要点

在 Windows 8.1 中引入的 SystemMediaTransportControls 类替代了之前的 MediaControl 类。你应该使用新的 SystemMediaTransportControls，而不是 MediaControl。

完成此练习后，你将了解如何配置可操纵 AV 系统的键盘键。

你需要了解的内容

技术

Windows Runtime

先决条件

你应当熟悉 HTML、JavaScript、Windows 事件和事件处理。
你必须安装可以播放 MPEG-Layer 3 (MP3) 或其他数字音乐文件的媒体播放机。

说明

步骤 1: 注册按钮按压事件，然后进行处理

MediaButtons 示例配置媒体传输事件。然后通过媒体控制按钮对事件进行侦听，包括频道递增和频道递减按钮。为响应按钮按压操作，弹出传输控制窗口，以提供视觉反馈，表示已检测到按压事件并进行了处理。

以下是用于注册事件及处理这些事件的 JavaScript 代码：

// Assign the button object to MediaControls
MediaControls = Windows.Media.MediaControl;

// Add event listeners for the buttons
MediaControls.addEventListener(“playpressed”, play, false);
MediaControls.addEventListener(“pausepressed”, pause, false);
MediaControls.addEventListener(“playpausetogglepressed”, playpausetoggle, false);

// Add event listeners for the audio element
document.GetElementById(“audiotag”).addEventListener(“playing”, playing, false);
document.GetElementById(“audiotag”).addEventListener(“paused”, paused, false);
document.GetElementById(“audiotag”).addEventListener(“ended”, ended, false);

// Define functions that will be the event handlers
function play() {
    document.getElementById(“audiotag”).play();
}
function pause() {
    document.getElementById(“audiotag”).pause();
}

function playpausetoggle() {
    if(MediaControls.isPlaying === true) {
        document.getElementById(“audiotag”).pause();
    } else {
        document.getElementById(“audiotag”).play();
    }
}

function playing() {
    MediaControls.isPlaying = true;
}

function paused() {
    MediaControls.isPlaying = false;
}

function ended() {
    MediaControls.isPlaying = false;
}

步骤 2: 禁用相应的按钮

播放列表的开头没有上一曲目。因此，该示例中，对第一个音频轨禁用了“上一曲目”按钮。同理，播放列表的末尾也没有下一曲目，所以禁用了“下一曲目”按钮。

以下是 JavaScript 代码段，介绍如何通过从 MediaControl 对象删除“上一曲目”和“下一曲目”的事件侦听器，禁用其相应的按钮：

// Assign the button object to MediaControls
MediaControls = Windows.Media.MediaControl;
…

// Disable the previous track button
MediaControls.removeEventListener(“previoustrackpressed”, previoustrack);

// Disable the next track button
MediaControls.removeEventListener(“nexttrackpressed”, nexttrack);

步骤 3: 启用相应的按钮

在第一曲目后，最后一曲目前启用“上一曲目”和“下一曲目”按钮。如果你的播放列表中有三个或更多曲目，则当你的音频应用正在播放除第一个或最后一个曲目以外的曲目时，最好启用“上一曲目”和“下一曲目”按钮。

以下是 JavaScript 代码段，介绍如何通过从 MediaControl 对象添加“上一曲目”和“下一曲目”的事件侦听器，启用其相应的按钮：

// Assign the button object to MediaControls
MediaControls = Windows.Media.MediaControl;
…

// Enable the previous track button
MediaControls.addEventListener(“previoustrackpressed”, previoustrack, false);

// Enable the next track button
MediaControls.addEventListener(“nexttrackpressed”, nexttrack, false);

步骤 4: 运行和测试 CallControl 示例

用于构建、运行以及测试此示例的详细说明包含在此示例介绍中。若要查看此示例的构建和其他说明以及查看完整清单，请参阅配置媒体键。

备注

你可使用刚构建和测试的代码，通过创建各个键的事件侦听器和事件处理程序，配置硬件媒体键。为响应按钮按压操作，将在屏幕上弹出传输控制窗口。这允许你检查事件侦听器和处理程序是否运行正常。

如需有关媒体控制按钮支持的其他事件的开发人员指南及详细信息，请参阅开发音频感知应用指南和系统传输控件。

Share via