Como configurar teclas para controles de mídia (HTML)(Windows 8)

Artigo
02/16/2016

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Este tutorial mostra como configurar, em um teclado, as teclas de mídia de hardware e então usar as teclas configuradas para controlar o fluxo de AV (áudio e vídeo) pressionando ou clicando em reproduzir, pausar, parar etc.

Importante

A classe SystemMediaTransportControls introduzida no Windows 8.1 substitui a classe MediaControl antiga. Você deve usar a nova SystemMediaTransportControls no lugar de MediaControl.

Após concluir este exercício, você saberá como configurar teclas do teclado que podem manipular o fluxo de áudio e vídeo.

O que você precisa saber

Tecnologias

Windows Runtime

Pré-requisitos

Você deve estar familiarizado com HTML, JavaScript, eventos do Windows e manipulação de eventos.
Você deve ter um reprodutor de mídia instalado que possa reproduzir MP3 ou outros arquivos de música digital.

Instruções

Etapa 1: Registrar os eventos de pressionamento de botões e manipulá-los

O exemplo de MediaButtons configura os eventos de transporte de mídia. Em seguida, ele ouve os eventos dos botões de controle de mídia, incluindo os controles de canal para cima ou canal para baixo. A janela de controle de transporte é exibida em resposta aos pressionamentos de botão, para fornecer o feedback visual de que o evento de pressionamento foi detectado e manipulado.

Este é o código JavaScript usado para registrar eventos e também manipular esses eventos:

// 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;
}

Etapa 2: Desabilitar os botões apropriados

No início da lista de reprodução, não há faixa anterior. Portanto, o botão Faixa Anterior é desabilitado para a primeira faixa de áudio do exemplo. De forma semelhante, no final da lista de reprodução, não há próxima faixa e o botão Próxima Faixa é desabilitado.

Este é um trecho de código JavaScript que mostra como desabilitar os botões Faixa Anterior e Próxima Faixa removendo os ouvintes de evento do objeto 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);

Etapa 3: Habilitar os botões apropriados

Depois da primeira faixa, mas antes da última faixa, os botões FaIxa Anterior e Próxima Faixa são habilitados. Se a lista de reprodução tiver três ou mais faixas nela e quando o aplicativo de áudio estiver reproduzindo uma faixa diferente da primeira ou última faixa, será uma prática recomendada habilitar os botões Faixa Anterior e Próxima Faixa.

Este é um trecho de código JavaScript que mostra como habilitar os botões Faixa Anterior e Próxima Faixa adicionando os ouvintes de evento ao objeto 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);

Etapa 4: Executar e testar o exemplo de CallControl

Instruções detalhadas de compilação, execução e teste desse exemplo estão incluídas na descrição do exemplo. Para ver a compilação e outras instruções desse exemplo e conferir a listagem completa, consulte Configurar teclas de mídia.

Comentários

O código que você compilou e testou permitiu a você configurar as teclas de mídia de hardware, criando ouvintes de evento e manipuladores de eventos para as diversas teclas. A janela de controle de transporte foi exibida na tela em resposta aos pressionamentos de botão. Isso permitiu que você verifique se os ouvintes e manipuladores de eventos estão funcionando corretamente.

Para obter orientação ao desenvolvedor e mais informações sobre os outros eventos compatíveis com os botões de controle de mídia, consulte Diretrizes para desenvolver aplicativos com reconhecimento de áudio e Controles de Transporte do Sistema.