Как настроить клавиши для элементов управления мультимедиа (HTML)(Windows 8)

Статья
02/16/2016

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

В этом руководстве мы расскажем о том, как настроить аппаратные клавиши мультимедиа на клавиатуре и использовать их для управления потоком аудио-видео (AV), нажимая «Воспроизведение», «Пауза», «Стоп» и т. д.

Важно

Класс SystemMediaTransportControls появился в Windows 8.1 и заменяет старый класс MediaControl. Следует использовать новый класс SystemMediaTransportControls вместо MediaControl.

Выполнив это упражнение, вы научитесь настраивать аппаратные клавиши на клавиатуре для управления аудиовидеопотоком (AV).

Что необходимо знать

Технологии

Windows Runtime

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

Вам необходимо знать HTML, Javascript и уметь обращаться с событиями Windows и обработкой событий.
У вас должен быть установлен проигрыватель мультимедиа, который может воспроизводить файлы формата MPEG-Layer 3 (MP3) или другие файлы цифровой музыки.

Инструкции

Этап 1: Регистрация событий нажатия кнопки и последующая их обработка

В образце кода MediaButtons настраиваются события транспортировки мультимедиа. Затем в нем прослушиваются события, происходящие при нажатии кнопок управления мультимедиа, включая кнопки "Предыдущий канал" и "Следующий канал". В ответ на нажатие кнопки всплывает окно управления транспортировкой, дающее визуальную информацию о том, что событие нажатия кнопки было обнаружено и обработано.

Здесь представлен код на JavaScript, который регистрируется для получения событий и обрабатывает их:

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

Этап 2: Отключение соответствующих кнопок

В начале списка воспроизведения отсутствует предыдущая запись. Поэтому в рассматриваемом образце для первой аудиозаписи кнопка "Предыдущая запись" отключена. Аналогично, в конце списка воспроизведения отсутствует следующая запись и, соответственно, кнопка "Следующая запись" неактивна.

Здесь представлен фрагмент кода JavaScript, который показывает, как отключить кнопки "Предыдущая дорожка" и "Следующая дорожка", удалив прослушиватели их событий из объекта 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);
```

Этап 3: Включение соответствующих кнопок

После первой записи и перед последней записью кнопки "Предыдущая запись" и "Следующая запись" активируются. Если в вашем списке воспроизведения имеется три или более записи, то при воспроизведении записи, которая не является первой или последней в списке, обычно активируют кнопки "Предыдущая запись" и "Следующая запись".

Здесь представлен фрагмент кода JavaScript, который показывает, как активировать кнопки "Предыдущая дорожка" и "Следующая дорожка" при помощи добавления прослушивателей их событий из объекта 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);
```

Этап 4: Запуск и тестирование образца CallControl

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

Примечания

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

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