如何設定媒體控制項的按鍵 (HTML)(Windows 8)

發行項
02/12/2016

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

這個教學課程說明如何在鍵盤上設定硬體媒體按鍵，然後透過按或按一下播放、暫停、停止等，使用設定的按鍵來控制音訊視訊 (AV) 串流。

重要事項

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

此範例的描述中會包含建置、執行及測試此範例的詳細指示。若要查看這個範例的建置和其他指示，以及查看完整清單，請參閱設定媒體的按鍵。

備註

您剛才建置和測試的程式碼可以讓您建立各個按鍵的事件接聽程式和事件處理常式，以設定硬體媒體按鍵。按下按鈕後，螢幕上會顯示傳輸控制視窗。可以讓您檢查事件接聽程式以及處理常式是否正常運作。

如需開發人員指導方針和有關其他支援媒體控制項按鈕事件的詳細資訊，請參閱開發音訊感知應用程式的指導方針和系統傳輸控制項。

共用方式為