如何在后台播放音频 (HTML)

项目
02/12/2016

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

本教程介绍如何为音频-视频 (AV) 流选择正确的类别，以将其配置为后台播放。

注意如果视频流正确分类为后台播放，则当视频切换为后台模式时，你将可以听到音频部分却看不到伴随的视频。这是故意如此设计的，旨在减少设备在后台播放视频时该设备的电源要求。

若要在操作中将此功能作为完整媒体播放示例的一部分进行查看，请参阅媒体播放详细信息。

先决条件

你必须熟悉 HTML、JavaScript、Windows 事件和事件处理。
你必须有已安装的 Microsoft Visual Studio 实例。
你必须具有可以流式播放音频和视频的应用。有关使用最简单的方法完成此操作的详细信息，请参阅快速入门：Windows 应用商店应用中的音频和快速入门：视频和音频。

说明

步骤 1: 在应用清单中声明后台音频

在 Microsoft Visual Studio 中打开应用的项目文件。
在解决方案资源管理器中双击 Package.appmanifest 文件以打开 Package.appmanifest 对话框。
单击“声明”选项卡，然后从“可用声明”下拉框中选择“后台任务”****。
单击“添加”，然后单击“音频”复选框，并单击“确定”。注意你也可以通过手动添加代码来声明后台音频。若要手动声明，请在 Package.appmanifest 文件中的 <Application> 和 </Application> 标记之间添加以下代码：
```
<Extensions>
   <Extension Category="windows.backgroundTasks" StartPage="default.html">
      <BackgroundTasks>
             <Task Type="audio" />
      </BackgroundTasks>
   </Extension>
</Extensions>
```
也可以通过使用在上面步骤中为音频创建的相同清单文件为视频流进行后台声明。若要执行此操作，请将“任务类型”特性设置为 audio。
将项目的起始页添加到 Start page: field。这通常是 default.html。

步骤 2: 为 msAudioCategory 特性设置正确值

在“解决方案资源管理器”窗格中，单击 HTML 文件以打开该文件。例如，如果你的应用的 HTML 文件名为 MyApp.htm，则单击该文件可打开该文件。

将“msAudioCategory”属性添加到 <audio> 标记中，并将该属性设置为 Communications 或 BackgroundCapabaleMedia，如下所示：

<audio msAudioCategory="BackgroundCapableMedia" controls="controls"> 
   <source src="Somesong.mp3"/> 
</audio>

如果为视频流设置了 msAudioCategory，请使用以下代码段：


<video msAudioCategory="BackgroundCapableMedia" controls="controls"> 
   <source src="Somevideo.mp4"/> 
</video >

步骤 3: 支持 SystemMediaTransportControls

Windows 8.1 引入了 SystemMediaTransportControls 类，它可以替代 MediaControl 类。你应该在应用中使用 SystemMediaTransportControls。为了完整性，下面包含了使用 MediaControl 实现后台音频支持的步骤，但你只应当使用 SystemMediaTransportControls。请参阅如何使用系统媒体传输控件来获得关于使用 SystemMediaTransportControls 的更详细的操作方法。

即使应用声明要在后台播放音频，该应用必须通过将 isPlayEnabled 和 isPauseEnabled 设置为 true 来启用 SystemMediaTransportControls 播放和暂停按钮。该应用还必须处理 buttonpressed 事件，它可以在按下系统媒体传输控件按钮时通知应用。通过提供此最小事件处理支持，你可以为用户提供在无需将应用带至前台的情况下，播放或暂停音频的功能。

除了处理 buttonpressed 事件，还必须在媒体状态更改（例如，当它暂停或播放）时通知 SystemMediaTransportControls。若要向 SystemMediaTransportControl 通知媒体状态更改，请将其 playbackStatus 属性设置为 MediaPlaybackStatus 中的值之一。

以下代码可以创建具有用于 paused、playing 和 ended 事件的事件处理程序的 video 对象并设置 SystemMediaTransportControls。它启用了播放和暂停按钮并为 buttonpressed 事件添加了一个事件处理程序。本示例的下文中显示了 paused、playing 和 ended 的事件处理程序。

<video id="mediaVideo" 
       controls 
       src="https://www.contoso.com/clip.mp4"
       onpause="mediaPaused(event)"
       onplaying="mediaPlaying(event)"
       onended="mediaEnded(event)" />

SystemMediaTransportControls systemControls;

public MainPage()
{
    this.InitializeComponent();

    // Hook up app to system transport controls.
    systemControls = SystemMediaTransportControls.GetForCurrentView();
    systemControls.ButtonPressed += SystemControls_ButtonPressed;

    // Register to handle the following system transpot control buttons.
    systemControls.IsPlayEnabled = true;
    systemControls.IsPauseEnabled = true;
}

以下代码创建了 buttonpressed 事件处理程序和帮助程序方法来播放和暂停 video。

// Event handler for SystemMediaTransportControls' buttonpressed event
function systemMediaControlsButtonPressed(eventIn) {

    var mediaButton = Windows.Media.SystemMediaTransportControlsButton;

    switch (eventIn.button) {
        case mediaButton.play:
            playMedia();
            break;

        case mediaButton.pause:
            pauseMedia();
            break;

        case mediaButton.stop:
            stopMedia();
            break;

        // Insert additional case statements for other buttons you want to handle
    }
}

// Plays the media.
function playMedia() {
    var media = document.getElementById("mediaVideo");
    media.play();
}

// Pauses the media.
function pauseMedia() {
    var media = document.getElementById("mediaVideo");
    media.pause();
}

// Stops the media.
function stopMedia() {
    var media = document.getElementById("mediaVideo");
    media.pause();
    media.currentTime = 0;
}

以下代码可以处理媒体事件，并更新 SystemMediaTransportControls 的 playbackStatus 属性。

// The media Play event handler.
function mediaPlaying() {
    // Update the SystemMediaTransportControl state.
    systemMediaControls.playbackStatus = Windows.Media.MediaPlaybackStatus.playing;
}

// The media Pause event handler.
function mediaPaused() {
    // Update the SystemMediaTransportControl state.
    systemMediaControls.playbackStatus = Windows.Media.MediaPlaybackStatus.paused;
}

// The media Ended event handler.
function mediaEnded() {
    // Update the SystemMediaTransportControl state.
    systemMediaControls.playbackStatus = Windows.Media.MediaPlaybackStatus.stopped;
}

有关 SystemMediaTransportControl 的详细信息，请参阅如何使用系统媒体传输控件和 SystemMediaTransportControls 示例

步骤 4: 注册媒体传输控件 (Windows 8)

要点

在 Windows 8.1 中引入的 SystemMediaTransportControls 类替代了之前的 MediaControl 类。你应该使用新的 SystemMediaTransportControls，而不是 MediaControl。请参阅如何使用系统媒体传输控件，获取有关使用 SystemMediaTransportControls 的详细信息。

即使应用注册为后台播放音乐或视频，应用也必须处理用于“播放”、“暂停”和“播放/暂停”按钮的事件。通过提供此最小事件处理支持，你可以为用户提供在无需将应用程序带至前台的情况下，在后台播放或暂停音乐或视频流的功能。

若要注册应用的媒体按钮，则必须首先创建 MediaControl 对象并为对象添加事件侦听器。随后，该对象可侦听你指定的事件。你还必须定义一个功能，当事件引发时将调用该功能来处理事件。

在“解决方案资源管理器”窗格中，单击应用的 JavaScript 文件以打开该文件。例如，如果你的应用的 JavaScript 文件名为 MyApp.js，则单击该文件可打开该文件。

使用以下代码为应用注册“播放”、“暂停”和“播放/暂停”切换按钮：

// Declare a variable that you will use as an instance of an object
var mediaControls;

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

// Add an event listener for the Play, Pause Play/Pause toggle button
mediaControls.addEventListener("playpausetogglepressed", playpausetoggle, false);
mediaControls.addEventListener(“playpressed”, playbutton, false);
mediaControls.addEventListener(“pausepressed”, pausebutton, false);

使用以下代码处理按下“播放”、“暂停”和“播放/暂停”切换按钮时引发的事件：

// The event handler for the play/pause button
function playpausetoggle() {
     if(mediaControls.isPlaying === true) {
              document.getElementById("audiotag").pause();
      } else {
              document.getElementById("audiotag").play();
      }
}

// The event handler for the pause button
function pausebutton() {
   document.getElementById("audiotag").pause();
}

// The event handler for the play button
function playbutton() {
   document.getElementById("audiotag").play();
}

备注

有关如何使用媒体传输控件的详细信息，请参阅系统传输控件开发人员指南白皮书。

注意如果你的应用执行除流式播放音频或视频任务之外的其他任务，则当应用失去焦点并且不再是活动窗口时，该应用应停止执行非媒体相关工作。你的应用仍流式播放音频，并且如果播放的是音频-视频流，则视频流将自动停止。快速入门：在应用中播放视频

完整示例

有关如何流式播放音频和视频的完整示例，请参阅播放管理器示例和 HTML 媒体播放示例。

通过