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

Applies to Windows and Windows Phone

이 자습서에서는 키보드에서 하드웨어 미디어 키를 구성한 다음 구성된 키를 사용하여 재생, 일시 중지, 중지 등을 누르거나 클릭하여 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 샘플 실행 및 테스트

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

설명

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

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

관련 항목

미디어를 위한 키 구성 샘플
오디오 인식 앱 개발에 대한 지침
MediaControl
시스템 전송 컨트롤

 

 

표시:
© 2014 Microsoft