미디어 제어를 위한 키를 구성하는 방법(HTML)(Windows 8)

아티클
02/12/2016

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

이 자습서에서는 키보드에서 하드웨어 미디어 키를 구성한 다음 구성된 키를 사용하여 재생, 일시 중지, 중지 등을 누르거나 클릭하여 AV(오디오-비디오) 스트림을 제어하는 방법을 보여 줍니다.

중요

Windows 8.1에서 도입된 SystemMediaTransportControls 클래스는 이전 MediaControl 클래스를 대체합니다. MediaControl 대신 새 SystemMediaTransportControls를 사용해야 합니다.

이 연습을 완료하면 AV 스트림을 조작할 수 있는 키보드 키의 구성 방법을 이해하게 됩니다.

알아야 할 사항

기술

Windows Runtime

사전 요구 사항

HTML, JavaScript, Windows 이벤트 및 이벤트 처리에 대해 잘 알고 있어야 합니다.
MP3(MPEG-Layer 3) 또는 다른 디지털 음악 파일을 재생할 수 있는 미디어 플레이어가 설치되어 있어야 합니다.

지침

단계 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: 적절한 단추를 사용하지 않도록 설정

재생 목록이 시작할 때는 이전 트랙이 없습니다. 따라서 예제의 첫 번째 오디오 트랙의 경우 이전 트랙 단추를 사용하지 않도록 설정합니다. 마찬가지로 재생 목록이 끝날 때는 다음 트랙이 없으므로 다음 트랙 단추를 사용하지 않도록 설정합니다.

다음은 MediaControl 개체에서 해당 이벤트 수신기를 제거하는 이전 및 다음 트랙 단추를 사용하지 않도록 설정하는 방법을 보여 주는 JavaScript 코드 조각입니다.

// 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: 적절한 단추를 사용하도록 설정

첫 번째 트랙 이후부터 마지막 트랙 전까지는 이전 및 다음 트랙 단추를 사용하도록 설정합니다. 재생 목록에 세 개 이상의 트랙이 포함된 경우 오디오 앱이 첫 번째나 마지막 트랙이 아닌 트랙을 재생할 때 이전 및 다음 트랙 단추를 사용하도록 설정하는 것이 좋습니다.

다음은 MediaControl 개체에서 해당 이벤트 수신기를 추가하는 이전 및 다음 트랙 단추를 사용하도록 설정하는 방법을 보여 주는 JavaScript 코드 조각입니다.

// 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 샘플 실행 및 테스트

이 샘플을 빌드, 실행 및 테스트하는 방법은 이 샘플에 대한 설명에 포함되어 있습니다. 이 샘플의 빌드와 기타 지침 및 전체 목록을 보려면 미디어를 위한 키 구성을 참조하세요.

설명

방금 빌드 및 테스트한 코드에서는 다양한 키에 대한 이벤트 수신기와 이벤트 처리기를 만들어 하드웨어 미디어 키를 구성할 수 있었습니다. 단추 누르기에 대한 응답으로 전송 제어 창이 표시됩니다. 이 창에서 이벤트 수신기와 처리기가 제대로 작동되고 있는지 확인할 수 있었습니다.

미디어 컨트롤 단추가 지원되는 기타 이벤트에 대한 개발자 자침 및 자세한 내용은 오디오 인식 앱 개발에 대한 지침 및 시스템 전송 컨트롤을 참조하세요.