Como reproduzir áudio em segundo plano (HTML)

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 selecionar a categoria correta de um fluxo de AV (áudio e vídeo) para configurá-lo para ser reproduzido em tela de fundo.

Observação Se um fluxo de vídeo está categorizado corretamente para ser reproduzido em tela de fundo, quando o vídeo é alternado para o modo de tela de fundo, você ouvirá o trecho de áudio mas não verá o vídeo que acompanha. Isso ocorre por padrão e reduz os requisitos de alimentação do dispositivo enquanto ele está reproduzindo o vídeo em tela de fundo.

Para ver esse recurso em ação como parte de um exemplo completo de reprodução de mídia, veja Reprodução de mídia, do início ao fim.

Pré-requisitos

Você precisa ter familiaridade com HTML, JavaScript, eventos do Windows e manipulação de eventos.
Você deve ter uma instância instalada do Microsoft Visual Studio.
Vpcê deve ter um aplicativo capaz de streaming de áudio e vídeo. Para saber mais sobre a maneira mais simples de fazer isso, veja Guia de início rápido: áudio em um aplicativo da Windows Store e Guia de início rápido: vídeo e áudio.

Instruções

Etapa 1: Fazer uma declaração de áudio em tela de fundo no manifesto do aplicativo

Abra o arquivo de projeto do aplicativo no Microsoft Visual Studio.
Clique duas vezes no arquivo Package.appmanifest no Gerenciador de Soluções para abrir a caixa de diálogo Package.appmanifest.
Clique na guia Declarations (Declarações) e selecione Background Tasks (Tarefas em Tela de Fundo) na caixa suspensa Available Declarations (Declarações Disponíveis).
Clique em Add (Adicionar), clique na caixa de diálogo Audio (Áudio) e clique em OK.Observação Você também pode criar a declaração para o áudio em tela de fundo, adicionando o código manualmente. Para criar a declaração manualmente, adicione o código a seguir entre as marcas <Application> e </Application> no arquivo Package.appmanifest:
```
<Extensions>
   <Extension Category="windows.backgroundTasks" StartPage="default.html">
      <BackgroundTasks>
             <Task Type="audio" />
      </BackgroundTasks>
   </Extension>
</Extensions>
```
Você também pode criar uma declaração em tela de fundo para um fluxo de vídeo usando o mesmo arquivo de manifesto que você criou para o áudio nas etapas anteriores. Para fazer isso, defina o atributo "Task Type" como audio.
Adicione a página inicial do seu projeto ao Start page: field. Em geral, ela é default.html.

Etapa 2: Definir o atributo msAudioCategory para o valor correto

No painel Solution Explorer, clique no arquivo HTML para abri-lo. Por exemplo, se o arquivo HTML para o aplicativo for denominado MyApp.htm, clique nesse arquivo para abri-lo.

Adicione o atributo "msAudioCategory" à marca <audio> e o defina como Communications ou BackgroundCapabaleMedia da seguinte maneira:

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

Se você estiver definindo o msAudioCategory para um fluxo de vídeo, use o seguinte trecho de código:


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

Etapa 3: Suporte SystemMediaTransportControls

O Windows 8.1 apresenta a classe SystemMediaTransportControls que substitui a classe MediaControl. Você deve usar SystemMediaTransportControls em seu aplicativo. As etapas para implementação do suporte a áudio em segundo plano com MediaControl estão descritas abaixo, na íntegra, mas você deve usar apenas SystemMediaTransportControls. Veja Como usar os controles de transporte de mídia do sistema para obter instruções mais detalhadas sobre o uso de SystemMediaTransportControls.

Mesmo que um aplicativo seja declarado para reproduzir áudio em segundo plano, ele deve ativar os botões de SystemMediaTransportControls de reprodução e pausa definindo isPlayEnabled e isPauseEnabled como true. O aplicativo também deve manipular o evento buttonpressed, que notifica o aplicativo quando os botões de controle de transporte de mídia do sistema são pressionados. Com esse suporte mínimo à manipulação de eventos, o usuário pode reproduzir ou pausar o áudio sem colocar o aplicativo no primeiro plano.

Além de manipular o evento buttonpressed, você também deve notificar o SystemMediaTransportControls quando o estado da mídia é alterado, como quando ela é pausada ou está em reprodução. Para notificar o SystemMediaTransportControl sobre as alterações no estado da mídia, defina a propriedade playbackStatus com um dos valores em MediaPlaybackStatus.

Este é o código que cria um objeto video com manipuladores de eventos para eventos paused, playing e ended e configura o SystemMediaTransportControls. Ele ativa os botões de reprodução e pausa, e adiciona um manipulador de eventos para o evento buttonpressed. Os manipuladores de eventos para paused, playing e ended são mostrados mais à frente neste exemplo.

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

Este código cria um manipulador de eventos buttonpressed e métodos auxiliares para reproduzir e pausar o 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;
}

Este é o código que manipula os eventos de mídia e atualiza a propriedade playbackStatus de SystemMediaTransportControls.

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

Para obter mais informações sobre o SystemMediaTransportControl, veja Como usar os controles de transporte de mídia do sistema e o exemplo de SystemMediaTransportControls

Etapa 4: Registrar controles de transporte de mídia (Windows 8)

Importante

A classe SystemMediaTransportControls introduzida no Windows 8.1 substitui a classe MediaControl antiga. Você deve usar a nova SystemMediaTransportControls no lugar de MediaControl. Confira Como usar os controles de transporte de mídia do sistema para saber mais sobre como usar SystemMediaTransportControls.

Mesmo se um aplicativo for registrado para reproduzir música ou vídeo em tela de fundo, o aplicativo deverá manipular os eventos dos botões reproduzir, pausar e reproduzir/pausar. Com esse mínimo suporte à manipulação de eventos, você possibilita ao usuário reproduzir ou pausar o fluxo de música ou vídeo em tela de fundo sem trazer o aplicativo para o primeiro plano.

Para registrar um botão de mídia com o seu aplicativo, primeiro crie um objeto MediaControl e adicione um ouvinte de evento ao objeto. O objeto poderá então ouvir os eventos que você especificar. Você também deve definir uma função que será chamada para manipular o evento quando este for acionado.

No painel Solution Explorer, clique no arquivo JavaScript do aplicativo para abri-lo. Por exemplo, se o arquivo JavaScript do aplicativo for denominado MyApp.js, clique nesse arquivo para abri-lo.

Use o seguinte código para registrar os botões de alternância Reproduzir, Pausar e Reproduzir/Pausar do aplicativo:

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

Use o seguinte código para manipular os eventos que são acionados quando os botões de alternância Reproduzir, Pausar e Reproduzir/Pausar são pressionados:

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

Comentários

Para saber mais sobre como trabalhar com os controles de transporte de mídia, veja o white paper Guia do Desenvolvedor de Controles de Transporte do Sistema.

Observação Se você tiver um aplicativo que realiza outras tarefas, além de fazer streaming de áudio ou vídeo, quando o aplicativo perder o foco e não for mais a janela ativa, seu aplicativo deverá parar de executar trabalhos não relacionados a mídia. O aplicativo ainda pode transmitir áudio e, no caso de um fluxo de áudio e vídeo, o streaming de vídeo para automaticamente. Guia de início rápido: reproduzindo vídeo em um aplicativo