Come riprodurre audio in background (HTML)

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 selezionare la categoria corretta per un flusso audio-video (AV) per configurarlo per la riproduzione in background.

Nota Se un flusso video è classificato correttamente per la riproduzione in background, quando passa alla modalità in background sentirai la parte audio ma non vedrai il relativo video. Questo è il comportamento predefinito e riduce il consumo di energia del dispositivo mentre il video viene riprodotto in background.

Per vedere questa funzionalità in azione nell'ambito di un esempio di riproduzione di elementi multimediali completa, vedi Riproduzione di elementi multimediali dall'inizio alla fine.

Prerequisiti

Devi avere familiarità con il linguaggio HTML, JavaScript, gli eventi di Windows e la gestione di eventi.
Devi avere un'istanza installata di Microsoft Visual Studio.
Devi avere un'app in grado di trasmettere i flussi audio e video. Per ulteriori informazioni sul modo più semplice per eseguire questa operazione, vedi Guida introduttiva: Audio in un'app di Windows Store e Guida introduttiva: Video e audio.

Istruzioni

Passaggio 1: Dichiarazione audio in background nel manifesto dell'app

Apri il file di progetto della tua app in Microsoft Visual Studio.
Fai doppio clic sul file Package.appmanifest in Esplora soluzioni per aprire la finestra di dialogo Package.appmanifest.
Fai clic sulla scheda Dichiarazioni, quindi seleziona Attività di background dalla casella a discesa Dichiarazioni disponibili.
Fai clic su Aggiungi, quindi seleziona la casella di controllo Audio e fai clic su OK.Nota Puoi anche creare la dichiarazione per l'audio in background aggiungendo manualmente il codice. Per creare manualmente la dichiarazione, aggiungi il codice seguente trai i tag <Application> e </Application> nel file Package.appmanifest:
```
<Extensions>
   <Extension Category="windows.backgroundTasks" StartPage="default.html">
      <BackgroundTasks>
             <Task Type="audio" />
      </BackgroundTasks>
   </Extension>
</Extensions>
```
Puoi anche creare una dichiarazione per un flusso video usando lo stesso file manifesto creato per l'audio nei passaggi precedenti. A questo scopo, imposta l'attributo "Tipo di attività" su audio.
Aggiungi la pagina iniziale del tuo progetto al Start page: field. In genere è default.html.

Passaggio 2: Impostare l'attributo msAudioCategory sul valore corretto

Nel riquadro Esplora soluzioni fai clic sul file HTML per aprirlo. Ad esempio, se il file HTML per la tua app è denominato MyApp.htm, fai clic su tale file per aprirlo.

Aggiungi l'attributo "msAudioCategory" al tag <audio> e imposta l'attributo su Communications o BackgroundCapabaleMedia come segue:

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

Se stai impostando l'attributo msAudioCategory per un flusso video, usa il seguente frammento di codice:


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

Passaggio 3: Supporto di SystemMediaTransportControls

In Windows 8.1 è stata introdotta la classe SystemMediaTransportControls in sostituzione della classe MediaControl. Usa SystemMediaTransportControls nella tua app. I passaggi necessari per implementare il supporto audio in background con MediaControl per completezza sono riportati di seguito, ma ti consigliamo di usare solo SystemMediaTransportControls. Per un approfondimento sull'uso di SystemMediaTransportControls, vedi Come usare i controlli del trasporto multimediale di sistema.

Anche se la riproduzione di audio in background è dichiarata, nell'app devono essere abilitati i pulsanti di riproduzione e pausa di SystemMediaTransportControls impostando isPlayEnabled e isPauseEnabled su true. L'app, inoltre, deve gestire l'evento buttonpressed, che notifica all'app quando vengono premuti i pulsanti di controllo del trasporto multimediale di sistema. Fornendo questo supporto minimo per la gestione degli eventi, consenti agli utenti di riprodurre o mettere in pausa l'audio senza portare l'app in primo piano.

Oltre a gestire l'evento buttonpressed, devi anche notificare a SystemMediaTransportControls i cambiamenti di stato del contenuto multimediale, ad esempio quando viene messo in pausa o quando è in esecuzione. Per notificare a SystemMediaTransportControl i cambiamenti di stato del contenuto multimediale, imposta la relativa proprietà playbackStatus su uno dei valori presenti in MediaPlaybackStatus.

Ecco un esempio di codice che crea un oggetto video con gestori per gli eventi paused, playing e ended e imposta SystemMediaTransportControls. Abilita i pulsanti di riproduzione e pausa e aggiunge un gestore per l'evento buttonpressed. I gestori di eventi per paused, playing ed ended sono indicati più avanti in questo esempio.

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

Ecco un esempio di codice che crea un gestore di eventi buttonpressed e i metodi helper per riprodurre e mettere in pausa l'oggetto 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;
}

Ecco un esempio di codice che gestisce gli eventi multimediali e aggiorna la proprietà playbackStatus di 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;
}

Per altre info su SystemMediaTransportControl, vedi Come usare i controlli del trasporto multimediale di sistema e l'esempio di controlli del trasporto multimediale di sistema

Passaggio 4: Registrazione per i controlli del trasporto multimediale (Windows 8)

Importante

La classe SystemMediaTransportControls introdotta in Windows 8.1 sostituisce la precedente classe MediaControl. Usa la nuova classe SystemMediaTransportControls al posto di MediaControl. Per altre info sull'uso di SystemMediaTransportControls, vedi Come usare i controlli del trasporto multimediale di sistema.

Anche se un'app è registrata per la riproduzione di musica o video in background, l'app deve gestire gli eventi per i pulsanti di riproduzione e pausa. Fornendo questo supporto minimo per la gestione degli eventi, consenti agli utenti di riprodurre o mettere in pausa flussi musicali o video in background senza portare l'applicazione in primo piano.

Per registrare un pulsante multimediale dell'app, devi prima creare un oggetto MediaControl e aggiungere un listener di eventi all'oggetto. L'oggetto potrà quindi restare in ascolto degli eventi che specificherai. Devi inoltre definire una funzione che verrà chiamata per gestire l'evento quando viene generato.

Nel riquadro Esplora soluzioni fai clic sul file JavaScript dell'app per aprirlo. Ad esempio, se il file JavaScript per la tua app è denominato MyApp.js, fai clic su tale file per aprirlo.

Usa il codice seguente per registrare i pulsanti Play, Pausa e l'interruttore Play/Pausa per la tua app:

// 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 il codice seguente per gestire l'evento che viene generato quando si premono i pulsante Play, Pausa e l'interruttore Play/Pausa:

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

Osservazioni

Per ulteriori informazioni su come usare i controlli del trasporto multimediale, vedi il white paper System Transport Controls Developer Guide.

Nota Se hai un'app che esegue altre attività in aggiunta alla trasmissione di flussi audio o video, quando l'app perde lo stato attivo e non è più nella finestra attiva, deve interrompere le operazioni non correlate a elementi multimediali. L'app può continuare a trasmettere flussi audio e, per i flussi audio-video, la trasmissione di flussi video si interromperà automaticamente. Guida introduttiva: Riproduzione di video in un'app