Cómo reproducir audio en segundo plano (HTML)

Artículo
02/16/2016

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

En este tutorial se muestra cómo seleccionar la categoría correcta de una secuencia de audio y vídeo (AV) y configurarla para que se reproduzca en segundo plano.

Nota Si la secuencia de vídeo está correctamente categorizada para reproducirse en segundo plano, entonces cuando el vídeo cambie a modo en segundo plano, podrás oír la parte de audio pero no verás el vídeo que lo acompaña. Esto es por diseño y reduce los requisitos de energía del dispositivo mientras reproduce el vídeo en segundo plano.

Para ver esta característica en acción como parte de una muestra de reproducción de multimedia completa, consulta Reproducción de multimedia, de principio a fin.

Requisitos previos

Debes estar familiarizado con el control de eventos y eventos de Windows, JavaScript y HTML.
Debes tener una versión instalada de Microsoft Visual Studio.
Debes contar con una aplicación capaz de transmitir audio y vídeo. Para obtener más información sobre la forma más sencilla de hacerlo, consulta el tema sobre inicio rápido: audio en una aplicación de la Tienda Windows e inicio rápido: vídeo y audio.

Instrucciones

Paso 1: Hacer una declaración de audio en segundo plano en el manifiesto de la aplicación

Abre el archivo del proyecto de tu aplicación en Microsoft Visual Studio.
Haz doble clic en el archivo Package.appmanifest en el Explorador de soluciones para abrir el cuadro de diálogo Package.appmanifest.
Haz clic en la pestaña Declaraciones, después selecciona Tareas en segundo plano en el cuadro desplegable Declaraciones disponibles.
Haz clic en Agregar, después en la casilla Audio y haz clic en Aceptar.Nota También puedes hacer la declaración de audio en segundo plano agregando el código manualmente. Para hacer la declaración manualmente, agrega el siguiente código entre las etiquetas <Application> y </Application> en el archivo Package.appmanifest:
```
<Extensions>
   <Extension Category="windows.backgroundTasks" StartPage="default.html">
      <BackgroundTasks>
             <Task Type="audio" />
      </BackgroundTasks>
   </Extension>
</Extensions>
```
También puedes hacer una declaración en segundo plano de una secuencia de vídeo usando el mismo archivo de manifiesto que creaste para el audio en los pasos anteriores. Para hacerlo, establece el atributo "Task Type" en audio.
Agrega la página de inicio de tu proyecto al Start page: field. Generalmente es default.html.

Paso 2: Establecer el atributo msAudioCategory en el valor correcto

En el panel del Explorador de soluciones, haz clic en el archivo HTML para abrirlo. Por ejemplo, si el archivo HTML de tu aplicación se denomina MyApp.htm, haz clic en ese archivo para abrirlo.
Agrega el atributo "msAudioCategory" a la etiqueta <audio> y establece el atributo en Communications o BackgroundCapabaleMedia de la siguiente manera:
```
<audio msAudioCategory="BackgroundCapableMedia" controls="controls"> 
   <source src="Somesong.mp3"/> 
</audio>
```
Si estás configurando el atributo msAudioCategory de una secuencia de vídeo, usa el siguiente fragmento de código:
```
<video msAudioCategory="BackgroundCapableMedia" controls="controls"> 
   <source src="Somevideo.mp4"/> 
</video >
```

Paso 3: Compatibilidad con SystemMediaTransportControls

Windows 8.1 introduce la clase SystemMediaTransportControls, que sustituye a la clase MediaControl. Deberías usar SystemMediaTransportControls en tu aplicación. Para ser más exactos, los pasos para implementar la compatibilidad con audio en segundo plano con MediaControl se incluyen a continuación, pero solo deberías usar SystemMediaTransportControls. Consulta Cómo usar los controles de transporte multimedia del sistema para ver una explicación más exhaustiva sobre el uso de SystemMediaTransportControls.

Incluso si se declara la aplicación para reproducir audio en segundo plano, la aplicación deberá habilitar los botones de reproducir y pausar de SystemMediaTransportControls mediante la configuración de isPlayEnabled y isPauseEnabled en true. La aplicación también debe controlar el evento buttonpressed, que notifica a la aplicación cuando se presionan los botones de los controles de transporte multimedia del sistema. Al proporcionar esta compatibilidad mínima con el control de eventos, permites que el usuario reproduzca o pause el audio sin llevar la aplicación a primer plano.

Además de controlar el evento buttonpressed, también debes notificar a SystemMediaTransportControls cuando cambia el estado multimedia, como cuando está en pausa o en reproducción. Para notificar a SystemMediaTransportControl sobre los cambios en el estado multimedia, establece su propiedad playbackStatus en uno de los valores de MediaPlaybackStatus.

Con el siguiente código se crea un objeto video con controladores de eventos para los eventos paused, playing y ended, y se configuran los SystemMediaTransportControls. Habilita los botones de reproducción y pausa y agrega un controlador de eventos para el evento buttonpressed. Los controladores de eventos de paused, playing y ended se muestran más adelante en este ejemplo.

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

Con este código se crean métodos auxiliares y un controlador de eventos de buttonpressed para reproducir y pausar el 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;
}

Con el siguiente código se controlan los eventos multimedia y se actualiza la propiedad 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 obtener más información sobre SystemMediaTransportControl, consulta el tema sobre cómo usar los controles de transporte multimedia del sistema y la muestra de SystemMediaTransportControls

Paso 4: Registrarse para controles de transporte multimedia (Windows 8)

Importante

La clase SystemMediaTransportControls introducida en Windows 8.1 sustituye a la antigua clase MediaControl. Deberías usar la nueva clase SystemMediaTransportControls en lugar de MediaControl. Consulta Cómo usar los controles de transporte multimedia del sistema para obtener más información sobre cómo usar los SystemMediaTransportControls.

Aunque una aplicación esté registrada para reproducir música o vídeo en segundo plano, la aplicación debe controlar eventos para los botones de reproducción y pausa. Al proporcionar esta compatibilidad mínima con el control de eventos, permites que el usuario reproduzca o pause la secuencia de música o vídeo en segundo plano sin llevar la aplicación a primer plano.

Para registrar un botón multimedia con tu aplicación, primero debes crear un objeto MediaControl y agregar una escucha de eventos al objeto. Después, el objeto podrá escuchar los eventos que especifiques. También debes definir que se llame a una función para que controle el evento cuando éste se produzca.

En el panel del Explorador de soluciones, haz clic en el archivo JavaScript de tu aplicación para abrirlo. Por ejemplo, si el archivo JavaScript de tu aplicación se denomina MyApp.js, haz clic en ese archivo para abrirlo.

Usa el siguiente código para registrar los botones que alternan entre pausar y reproducir de tu aplicación:

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

Usa el siguiente código para controlar los eventos que se generan cuando se presionan los botones que alternan entre reproducir y pausar:

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

Observaciones

Para obtener más información sobre cómo trabajar con controles multimedia, consulta la notas del producto de la Guía para desarrolladores de controles de transporte del sistema.

Nota Si tienes una aplicación que realiza otras tareas además de transmitir audio y vídeo, entonces, cuando la aplicación pierda foco y ya no sea la ventana activa, debe dejar de realizar trabajos que no estén relacionados con elementos multimedia. La aplicación puede continuar transmitiendo audio y, en el caso de una secuencia de audio-vídeo, la transmisión de vídeo se detendrá automáticamente. Inicio rápido: reproducir vídeo en una aplicación