如何在背景播放音訊 (HTML)

發行項
02/12/2016

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

這個教學課程會示範如何選取正確的音訊視訊 (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)

重要事項

SystemMediaTransportControls 類別是在 Windows 8.1 中引進以取代舊 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 媒體播放範例。

Share via