Come configurare i tasti per i controlli multimediali (HTML)(Windows 8)

Articolo
02/12/2016

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

In questa esercitazione viene mostrato come configurare i tasti multimediali hardware su una tastiera e usare quindi i tasti configurati per controllare un flusso audio-video (AV) premendo o facendo clic sui pulsanti di riproduzione, pausa, arresto e così via.

Importante

La classe SystemMediaTransportControls introdotta in Windows 8.1 sostituisce la precedente classe MediaControl. Usa la nuova classe SystemMediaTransportControls al posto di MediaControl.

Al termine dell'esercizio, verrà spiegato come configurare i tasti della tastiera che possono manipolare un flusso audio-video (AV).

Cosa sapere

Tecnologie

Windows Runtime

Prerequisiti

Devi conoscere già il linguaggio HTML, JavaScript, gli eventi di Windows e la gestione degli eventi.
Devi avere installato un lettore multimediale in grado di riprodurre MP3 (MPEG-Layer 3) o altri file musicali digitali.

Istruzioni

Passaggio 1: Registra gli eventi di scelta pulsante, quindi gestiscili

L'esempio di MediaButtons configura gli eventi di trasporto multimediale. Ascolta poi gli eventi dai pulsanti di controllo multimediali, inclusi i pulsanti Canale successivo e Canale precedente. La finestra di controllo del trasporto viene visualizzata in risposta al pulsante che si preme per fornire una risposta visiva relativa al rilevamento e alla gestione dell'evento di scelta.

Ecco il codice JavaScript per la registrazione e la gestione degli eventi:

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

Passaggio 2: Disabilita i pulsanti appropriati

All'inizio della playlist non esiste una traccia precedente. Il pulsante Traccia precedente è quindi disabilitato per la prima traccia audio nell'esempio. Allo stesso modo, alla fine della playlist, non esiste una traccia successiva, quindi il pulsante Traccia successiva è disabilitato.

Ecco un frammento di codice JavaScript che mostra come disabilitare i pulsanti Traccia precedente e Traccia successiva eliminando i propri listener eventi dall'oggetto 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);

Passaggio 3: Abilita i pulsanti appropriati

I pulsanti Traccia precedente e successiva vengono abilitati tra la prima e l'ultima traccia. Se la tua playlist contiene tre o più tracce, quando la tua app audio riproduce una traccia diversa dalla prima e dall'ultima, abilita i pulsanti Traccia precedente e successiva.

Ecco un frammento di codice JavaScript che mostra come abilitare i pulsanti Traccia precedente e successiva aggiungendo i propri listener eventi dall'oggetto 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);

Passaggio 4: Esegui e verifica l'esempio CallControl

Le istruzioni dettagliate per la compilazione, l'esecuzione e il testing di questo esempio sono incluse nella relativa descrizione. Per vedere la build e altre istruzioni per questo esempio e per vedere l'elenco completo, consulta Configurare i tasti per gli elementi multimediali.

Osservazioni

Il codice appena compilato e testato ti consente di configurare i tasti multimediali hardware tramite la creazione di listener eventi e gestori di eventi per i diversi tasti. La finestra di controllo del trasporto viene visualizzata sullo schermo in risposta al pulsante che si preme. In questo modo puoi controllare il corretto funzionamento dei listener e dei gestori di eventi.

Per la guida per gli sviluppatori e altre informazioni sugli altri eventi supportati per i pulsanti del controllo multimediale, vedi Linee guida per lo sviluppo di app con funzionalità audio e Controlli per il trasporto di sistema.