Condividi tramite


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

[ 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.

Argomenti correlati

Esempio di configurazione dei tasti per i controlli multimediali

Linee guida per lo sviluppo di app con funzionalità audio

MediaControl

Controlli per il trasporto di sistema