Поделиться через


Как настроить клавиши для элементов управления мультимедиа (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

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