如何在背景播放音訊 (HTML)
[ 本文的目標對象是撰寫 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 媒體播放範例。