시스템 미디어 전송 컨트롤을 사용하는 방법(HTML)

  • 아티클

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

SystemMediaTransportControls 클래스를 사용하면 앱이 Windows에서 제공하는 시스템 미디어 전송 컨트롤을 사용하고 표시되는 미디어 정보를 업데이트할 수 있습니다.

전체 미디어 재생 샘플의 일부로 이 기능의 작동을 확인하려면 미디어 재생 전체 프로세스를 참조하세요.

소개

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

시스템 전송 컨트롤은 audio 또는 video 개체의 전송 컨트롤과 다릅니다. 시스템 전송 컨트롤은 헤드폰 볼륨 컨트롤, 키보드의 미디어 단추 등 하드웨어 미디어 키를 누를 때 팝업되는 컨트롤입니다. 사용자가 키보드에서 Pause 키를 누를 경우 앱이 SystemMediaTransportControls를 지원하면 앱이 알림을 받고 적절한 조치를 취할 수 있습니다.

앱은 또한 SystemMediaTransportControls가 표시하는 곡 제목 및 미리 보기 이미지 등의 미디어 정보를 업데이트할 수 있습니다.

전송 컨트롤 설정

SystemMediaTransportControls의 인스턴스를 가져오려면 getForCurrentView를 호출합니다.

앱에서 처리할 단추를 사용하도록 설정하려면 SystemMediaTransportControls 개체에서 해당 "is enabled" 속성(예: isPlayEnabled, isPauseEnabled, isNextEnabled, isPreviousEnabled)을 설정합니다. 전체 목록을 보려면 SystemMediaTransportControls 참조 설명서를 참조하세요.

다음은 paused, playing 및 ended 이벤트의 이벤트 처리기를 사용하여 video 개체를 만들고 SystemMediaTransportControls를 설정하는 코드입니다. 이 코드는 재생 및 일시 중지 단추를 사용하도록 설정하고 buttonpressed 이벤트의 이벤트 처리기를 추가합니다. 이 예제의 뒷부분에는 paused, playing 및 ended의 이벤트 처리기가 표시됩니다.

<video id="mediaVideo" 
       controls 
       src="https://www.contoso.com/clip.mp4"
       onpause="mediaPaused(event)"
       onplaying="mediaPlaying(event)"
       onended="mediaEnded(event)" />

var systemMediaControls;

systemMediaControls = Windows.Media.SystemMediaTransportControls.getForCurrentView();

systemMediaControls.addEventListener("buttonpressed", systemMediaControlsButtonPressed, false);

systemMediaControls.isPlayEnabled = true;
systemMediaControls.isPauseEnabled = true;
systemMediaControls.isStopEnabled = true;

systemMediaControls.playbackStatus = Windows.Media.MediaPlaybackStatus.closed;

전송 컨트롤과 통신

전송 컨트롤을 사용할 때 통신은 다음 세 단계로 이루어집니다.

설정된 단추 중 하나를 누르면 SystemMediaTransportControls가 buttonpressed 이벤트를 통해 앱에 알립니다. 그러면 앱은 어떤 단추를 눌렀는지에 따라 일시 중지 또는 재생 등과 같이 미디어를 제어할 수 있습니다.

미디어 상태가 변경되면 앱은 SystemMediaTransportControls.playbackStatus 속성을 통해 SystemMediaTransportControls에 알립니다. 그러면 전송 컨트롤은 미디어 원본의 상태와 동일하게 단추 상태를 업데이트할 수 있습니다.

SystemMediaTransportControlsDisplayUpdater를 사용하여 전송 컨트롤이 표시하는 미디어 정보(예: 곡 제목 또는 앨범 아트)를 업데이트할 수 있습니다.

단추 누름 처리

설정된 단추 중 하나를 누르면 시스템 전송 컨트롤에 의해 buttonpressed 이벤트가 발생합니다. button 속성 이벤트 인수는 어떤 단추를 눌렀는지 지정합니다.

다음은 buttonpressed 이벤트 처리기 및 video를 재생하고 일시 중지하는 도우미 메서드를 만드는 일부 코드입니다.

// Event handler for SystemMediaTransportControls' buttonpressed event
function systemMediaControlsButtonPressed(eventIn) {

    var mediaButton = Windows.Media.SystemMediaTransportControlsButton;

    switch (eventIn.button) {
        case mediaButton.play:
            playMedia();
            break;

        case mediaButton.pause:
            pauseMedia();
            break;

        case mediaButton.stop:
            stopMedia();
            break;

        // Insert additional case statements for other buttons you want to handle
    }
}

// Plays the media.
function playMedia() {
    var media = document.getElementById("mediaVideo");
    media.play();
}

// Pauses the media.
function pauseMedia() {
    var media = document.getElementById("mediaVideo");
    media.pause();
}

// Stops the media.
function stopMedia() {
    var media = document.getElementById("mediaVideo");
    media.pause();
    media.currentTime = 0;
}

미디어 상태 업데이트

SystemMediaTransportControls에 미디어의 상태가 변경된 것을 알리려면 playbackStatus를 적절한 MediaPlaybackStatus 값으로 설정합니다.

다음은 미디어 이벤트를 처리하고 SystemMediaTransportControls의 playbackStatus 속성을 업데이트하는 코드입니다.

// The media Play event handler.
function mediaPlaying() {
    // Update the SystemMediaTransportControl state.
    systemMediaControls.playbackStatus = Windows.Media.MediaPlaybackStatus.playing;
}

// The media Pause event handler.
function mediaPaused() {
    // Update the SystemMediaTransportControl state.
    systemMediaControls.playbackStatus = Windows.Media.MediaPlaybackStatus.paused;
}

// The media Ended event handler.
function mediaEnded() {
    // Update the SystemMediaTransportControl state.
    systemMediaControls.playbackStatus = Windows.Media.MediaPlaybackStatus.stopped;
}

미디어 정보 및 미리 보기 업데이트

SystemMediaTransportControlsDisplayUpdater 클래스를 사용하여 전송 컨트롤이 표시하는 미디어 정보(예: 곡 제목 또는 앨범 아트)를 업데이트할 수 있습니다.

displayUpdater 속성은 SystemMediaTransportControls와 연결된 SystemMediaTransportControlsDisplayUpdater입니다.

musicProperties, imageProperties 또는 videoProperties의 미디어 속성을 설정하여 메타데이터를 수동으로 업데이트할 수 있습니다. 그러나 파일에서 메타데이터 및 미리 보기 이미지를 자동으로 추출하는 copyFromFileAsync 메서드에 미디어 파일을 전달하는 것이 훨씬 쉽고 바람직합니다.

표시할 모든 미디어 정보를 설정했으면 update를 호출합니다. update를 호출하기 전에는 UI가 업데이트되지 않습니다.

Windows.Storage.StorageFile 및 Windows.Storage.Streams.RandomAccessStreamReference는 미디어 정보로 작업할 때 유용한 정적 메서드를 제공합니다.

StorageFile

RandomAccessStreamReference

Windows: 백그라운드 오디오

Windows에서 오디오를 백그라운드로 재생하려면 앱은 isPlayEnabled 및 isPauseEnabled를 true로 설정하여 재생 및 일시 중지 단추를 사용하도록 설정해야 합니다. 앱은 또한 buttonpressed 이벤트를 처리해야 합니다. Windows에서 오디오를 백그라운드로 재생하기 위한 모든 요구 사항을 보려면 백그라운드에서 오디오를 재생하는 방법을 참조하세요.