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

[ Эта статья адресована разработчикам приложений среды выполнения 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

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

Примечания

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

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

Связанные разделы

Образец настройки клавиш для элементов управления мультимедиа

Правила разработки приложений, поддерживающих аудио

MediaControl

Системные элементы управления воспроизведением