Как воспроизводить звук в фоновом режиме (HTML)

Статья
02/16/2016

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

В этом учебнике показано, как выбрать правильную категорию аудио- и видеопотока, чтобы настроить его на воспроизведение в фоновом режиме.

Примечание Если видеопоток правильно классифицируется для воспроизведения в фоне, то при переключении видео в фоновый режим вы услышите звуковую часть потока, но не увидите сопутствующего видео. Это сделано намерено, чтобы сократить потребление электроэнергии устройством, когда оно воспроизводит видео в фоновом режиме.

Посмотрите, как работает эта функция, в статье о воспроизведении мультимедиа — от начала и до конца.

Необходимые условия

Вы должны быть знакомы с HTML, JavaScript, событиями Windows и обработкой событий.
У вас должен быть установлен экземпляр Microsoft Visual Studio.
У вас должно быть приложение, поддерживающее потоковую передачу звука и видео. Подробнее о самой простой реализации этого см. в разделах Краткое руководство: звук в приложении Магазина Windows и Краткое руководство: видео и звук.

Инструкции

Этап 1: Объявление возможности воспроизведения звука в фоновом режиме в манифесте приложения

Откройте файл проекта вашего приложения в Microsoft Visual Studio.
Дважды щелкните файл Package.appmanifest в обозревателе решений, чтобы открыть диалоговое окно Package.appmanifest.
Щелкните вкладку Объявления и выберите пункт Фоновые задачи в раскрывающемся списке Доступные объявления.
Нажмите кнопку Добавить, установите флажок Звук и нажмите кнопку ОК.Примечание Вы также можете объявить возможность воспроизведения звука в фоновом режиме, добавив код вручную. Чтобы объявить эту возможность вручную, добавьте в файл Package.appmanifest следующий код между тегами <Application> и </Application>.
```
<Extensions>
   <Extension Category="windows.backgroundTasks" StartPage="default.html">
      <BackgroundTasks>
             <Task Type="audio" />
      </BackgroundTasks>
   </Extension>
</Extensions>
```
Кроме того, вы можете объявить возможность фонового воспроизведения для видеопотока, используя тот же файл манифеста, который вы создали для звука на предыдущих этапах. Для этого установите для атрибута "Тип задачи" значение audio.
Добавьте начальную страницу своего проекта в Start page: field. Обычно это default.html.

Этап 2: Задание правильного значения для атрибута msAudioCategory

На панели Обозреватель решений щелкните HTML-файл, чтобы открыть его. Например, если HTML-файл для вашего приложения имеет имя MyApp.htm, щелкните этот файл, чтобы открыть его.
Добавьте атрибут msAudioCategory в тег <audio> и установите для него значение Communications или BackgroundCapabaleMedia, как указано ниже:
```
<audio msAudioCategory="BackgroundCapableMedia" controls="controls"> 
   <source src="Somesong.mp3"/> 
</audio>
```
Если вы задаете атрибут msAudioCategory для видеопотока, используйте следующий фрагмент кода.
```
<video msAudioCategory="BackgroundCapableMedia" controls="controls"> 
   <source src="Somevideo.mp4"/> 
</video >
```

Этап 3: Поддержка SystemMediaTransportControls

В Windows 8.1 появился класс SystemMediaTransportControls, который заменяет класс MediaControl. В приложении следует использовать класс SystemMediaTransportControls. Для полноты примера далее представлены шаги по реализации фонового звука на основе MediaControl, однако следует пользоваться только классом SystemMediaTransportControls. Подробное описание использования SystemMediaTransportControls см. в разделе Использование системных элементов управления транспортировкой мультимедиа.

Даже если для приложения объявлено воспроизведение звука в фоновом режиме, необходимо включить кнопки SystemMediaTransportControls для воспроизведения и приостановки, установив для свойств isPlayEnabled и isPauseEnabled значение true. Приложение также должно обрабатывать событие buttonpressed, которое уведомляет приложение о нажатии кнопок системных элементов управления транспортировкой мультимедиа. Обеспечив минимальную поддержку обработки событий, вы предоставляете пользователю возможность воспроизводить и приостанавливать звук, не выводя приложение на передний план.

Помимо обработки события buttonpressed, вы также должны уведомить SystemMediaTransportControls об изменении состояния мультимедиа (приостановка или возобновление воспроизведения и т. п.). Чтобы уведомить SystemMediaTransportControl об изменении состояния мультимедиа, установите для свойства playbackStatus одно из значений MediaPlaybackStatus.

Вот пример кода, который создает объект video с обработчиками событий paused, playing и ended, а также устанавливает SystemMediaTransportControls. В коде включаются кнопки воспроизведения и паузы и добавляется обработчик для события buttonpressed. Обработчики событий paused, playing и ended показаны далее в этом примере.

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

Вот код, в котором создаются обработчик событий buttonpressed и вспомогательные методы для воспроизведения и приостановки 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;
}

Вот код, обрабатывающий события мультимедиа и обновляющий свойство playbackStatus элемента 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;
}

Подробнее о SystemMediaTransportControl см. в разделах Использование системных элементов управления транспортировкой мультимедиа и Пример SystemMediaTransportControls.

Этап 4: Регистрация элементов управления транспортировкой мультимедиа (Windows 8)

Важно

Класс SystemMediaTransportControls, появившийся в Windows 8.1, заменяет старый класс MediaControl. Следует использовать новый класс SystemMediaTransportControls вместо MediaControl. Подробное описание использования класса SystemMediaTransportControls см. в разделе Использование системных элементов управления транспортировкой мультимедиа.

Даже если приложение зарегистрировано для воспроизведения музыки или видео в фоновом режиме, оно должно обрабатывать события для кнопок воспроизведения, паузы и воспроизведения/паузы. Обеспечив эту минимальную поддержку обработки событий, вы предоставляете пользователю возможность воспроизводить или приостанавливать музыку или видеопоток, не выводя приложение на передний план.

Чтобы зарегистрировать кнопку мультимедиа для своего приложения, вы должны сначала создать объект MediaControl и добавить для него прослушиватель событий. После этого объект может прослушивать указанные вами события. Вы также должны определить функцию, которая будет вызываться для обработки произошедшего события.

На панели Обозреватель решений щелкните JavaScript-файл вашего приложения, чтобы открыть его. Например, если JavaScript-файл для вашего приложения имеет имя MyApp.js, щелкните этот файл, чтобы открыть его.

Используйте следующий код, чтобы зарегистрировать выключатели "Воспроизведение", "Пауза" и "Воспроизведение/пауза" для вашего приложения:

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

Используйте следующий код для обработки событий, происходящих при нажатии выключателей "Воспроизведение", "Пауза" и "Воспроизведение/пауза":

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

Примечания

Подробнее о работе с элементами управления передачей мультимедиа см. в техническом документе Руководство разработчика для системных элементов управления передачей.

Примечание Если ваше приложение, помимо потоковой передачи звука и видео, выполняет другие задачи, то, когда оно утрачивает фокус и его окно становится неактивным, приложение должно остановить задачи, не относящиеся к мультимедиа. В случае с аудио- и видеопотоком ваше приложение все еще может выполнять потоковую передачу звука, а потоковая передача видео будет остановлена. Краткое руководство: воспроизведение видео в приложении