How to play audio in the background (Windows Store apps using JavaScript and HTML)

This tutorial shows you how to select the correct category for an audio-video (AV) stream to configure it to play in the background.

Note  If a video stream is correctly categorized to play in the background, then when the video is switched to background mode, you will hear the audio portion but not see the accompanying video. This is by design and it reduces the power requirements of the device while it is playing the video in the background.

What you need to know

Technologies

• Windows Runtime

Prerequisites

• You must be familiar with HTML, JavaScript, Windows events, and event handling.

• You must have an installed instance of Microsoft Visual Studio Express 2012 for Windows 8.

• You must have an app that is capable of streaming audio and video. For more information about the simplest way to do this, see Quickstart: audio in a Windows Store app and Quickstart: video and audio.

Instructions

Step 1: Make a background audio declaration in the app manifest

1. Open the project file for your app in Microsoft Visual Studio.
2. Double-click the Package.appmanifest file in the Solution Explorer to open the Package.appmanifest dialog box.
3. Click the Declarations tab, then select Background Tasks from the Available Declarations dropdown box.
4. Click Add, then click the Audio checkbox, and click OK.

   Note  You can also make the declaration for background audio by adding the code manually. To make the declaration manually, add the following code between the <Application> and </Application> tags in the Package.appmanifest file:

   XML

   Copy

   
   
   <Extensions>
      <Extension Category="windows.backgroundTasks" StartPage="default.html">
         <BackgroundTasks>
   	         <Task Type="audio" />
         </BackgroundTasks>
      </Extension>
   </Extensions>
   
   

   You can also make a background declaration for a video stream by using the same manifest file that you created for audio in the preceding steps. To do this, set the "Task Type" attribute to audio.

Step 2: Set msAudioCategory attribute to correct value

1. In the Solution Explorer pane, click the HTML file to open it. For example, if the HTML file for your app is named MyApp.htm, then click that file to open it.
2. Add the "msAudioCategory" attribute to the <audio> tag, and set the attribute to either Communications or BackgroundCapabaleMedia as follows:
   XML

   Copy

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

   If you’re setting the msAudioCategory for a video stream, use the following code snippet:

   XML

   Copy

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

Step 3: Register for media transport controls

Even if an app is registered to play music or video in the background, the app must handle events for play, pause, and play/pause buttons. By providing this minimal event handling support, you make it possible for the user to play or pause the music or video stream in the background without bringing the application to the foreground.

To register a media button with your app, you must first create a MediaControl object and add an event listener to the object. Then the object can listen for the events that you specify. You must also define a function that will be called to handle the event when the event is raised.

1. In the Solution Explorer pane, click your app’s JavaScript file to open it. For example, if the JavaScript file for your app is named MyApp.js, click that file to open it.
2. Use the following code to register for the Play, Pause, and Play/Pause toggle buttons for your app:
   JavaScript

   Copy

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

3. Use the following code to handle the events that are raised when the Play, Pause, and Play/Pause toggle buttons are pressed:
   JavaScript

   Copy

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

Remarks

For more information about how to work with media transport controls, see the System Transport Controls Developer Guide white paper.

Note  If you have an app that performs other tasks in addition to streaming audio or video, then when the app loses focus and is no longer the active window, your app should stop doing non-media related work. Your app can still stream audio and, in the case of an audio-video stream, video streaming will stop automatically. Quickstart: playing video in an app

Complete example

For complete examples of how to stream audio and video, see the Playback manager sample and the HTML media playback sample.

Related topics

HTML media playback sample

Playback manager sample

System Transport Controls Developer Guide

Quickstart: audio in a Windows Store app

Quickstart: video and audio

Build date: 11/29/2012