Cómo configurar teclas para controles de medios (HTML)(Windows 8)

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 aprenderás a configurar las teclas multimedia de hardware en un teclado y después usar dichas teclas para controlar una secuencia de audio y vídeo (AV) al presionar o hacer clic en reproducir, pausar o detener, entre otras acciones.

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.

Una vez completado el ejercicio, comprenderás cómo configurar las teclas de teclado para manipular una secuencia de AV.

Lo que debes saber

Tecnologías

Windows Runtime

Requisitos previos

Deberías estar familiarizado con HTML, JavaScript, eventos de Windows y el control de eventos.
Debes tener un reproductor multimedia instalado que pueda reproducir MPEG-Layer 3 (MP3) u otros archivos digitales de música.

Instrucciones

Paso 1: Registrarse para eventos de presionar botón y después controlarlos

En el ejemplo MediaButtons se configuran eventos de transporte de multimedia. Después se escuchan los eventos de los botones de control multimedia, incluidos los botones Subir o Bajar de canal. La ventana de control de transporte se abre al presionar los botones para proporcionar comentarios visuales que informan que se detectó y controló el evento de presionar un botón.

Este es el código JavaScript para registrarse para eventos y controlarlos:

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

Paso 2: Deshabilitar los botones adecuados

Al inicio de la lista de reproducción, no existe una pista anterior. Por lo tanto, se deshabilita el botón Pista anterior para la primera pista de audio del ejemplo. De forma similar, al final de la lista de reproducción, no hay una pista siguiente, por lo que se deshabilita el botón Pista siguiente.

Este es el fragmento de código JavaScript que muestra cómo deshabilitar los botones Pista anterior y Pista siguiente mediante la eliminación de sus escuchas de eventos del 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);

Paso 3: Habilitar los botones adecuados

Los botones Pista anterior y Pista siguiente se habilitan después de la primera pista y antes de la última. Si la lista de reproducción tiene tres pistas o más, cuando la aplicación de audio esté reproduciendo una pista que no sea la primera ni la última, recomendamos habilitar los botones Pista anterior y Pista siguiente.

Este es el fragmento de código JavaScript que muestra cómo habilitar los botones Pista anterior y Pista siguiente mediante la incorporación de sus escuchas de eventos del 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);

Paso 4: Ejecutar y probar el ejemplo de CallControl

En la descripción de esta muestra, podrás encontrar instrucciones detalladas para compilar, ejecutar y probar la muestra. Para ver las instrucciones de compilación y otras instrucciones para esta muestra y la lista completa, consulta el tema sobre cómo configurar teclas para multimedia.

Observaciones

El código que acabas de compilar y probar te permitió configurar teclas multimedia de hardware, mediante la creación de escuchas y controladores de eventos para varias teclas. La ventana de control de transporte se abrió en la pantalla debido a que se presionaron botones. Esto te permitió comprobar que las escuchas y los controladores de eventos estaban funcionando correctamente.

Para obtener instrucciones de desarrollo y más información sobre los demás eventos que se admiten para los botones de control multimedia, consulta Directrices para el desarrollo de aplicaciones compatibles con audio y el tema sobre controles de transporte del sistema.