백그라운드에서 오디오를 재생하는 방법(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
이 자습서에서는 AV(오디오-동영상) 스트림을 백그라운드에서 재생하도록 구성하기 위해 스트림의 올바른 범주를 선택하는 방법을 보여 줍니다.
참고 동영상 스트림을 백그라운드에서 재생하도록 올바르게 범주화한 경우 동영상이 백그라운드 모드로 전환되면 오디오는 들리지만 해당 동영상은 보이지 않습니다. 이는 동영상을 백그라운드에서 재생하는 동안 장치의 전원 요구 사항을 줄이기 위해 의도된 것입니다.
전체 미디어 재생 샘플의 일부로 이 기능의 작동을 확인하려면 미디어 재생 전체 프로세스를 참조하세요.
사전 요구 사항
HTML, JavaScript, Windows 이벤트와 이벤트 처리에 대해 잘 알고 있어야 합니다.
Microsoft Visual Studio의 설치된 인스턴스가 있어야 합니다.
오디오와 동영상을 스트리밍할 수 있는 앱이 있어야 합니다. 이렇게 하는 가장 간단한 방법에 대해서는 빠른 시작: Windows 스토어 앱의 오디오 및 빠른 시작: 동영상 및 오디오를 참조하세요.
지침
단계 1: 앱 매니페스트에서 백그라운드 오디오 선언하기
Microsoft Visual Studio에서 앱에 대한 프로젝트 파일을 엽니다.
솔루션 탐색기에서 Package.appmanifest 파일을 두 번 클릭하여 Package.appmanifest 대화 상자를 엽니다.
선언 탭을 클릭한 다음 Available Declarations(사용 가능한 선언) 드롭다운 상자에서 백그라운드 작업을 선택합니다.
추가를 클릭한 다음 오디오 확인란을 클릭하고 확인을 클릭합니다.참고 코드를 수동으로 추가하여 백그라운드 오디오에 대한 선언을 만들 수도 있습니다. 선언을 수동으로 만들려면 Package.appmanifest 파일에서 <Application> 태그와 </Application> 태그 사이에 다음 코드를 추가합니다.
<Extensions> <Extension Category="windows.backgroundTasks" StartPage="default.html"> <BackgroundTasks> <Task Type="audio" /> </BackgroundTasks> </Extension> </Extensions>이전 단계에서 오디오에 대해 만든 것과 동일한 매니페스트 파일을 사용하여 동영상 스트림에 대한 백그라운드 선언을 만들 수도 있습니다. 이렇게 하려면 "작업 유형" 특성을 audio로 설정합니다.
프로젝트의 시작 페이지를
Start page: field에 추가합니다. 일반적으로 default.html입니다.
단계 2: msAudioCategory 특성을 해당 값으로 설정
솔루션 탐색기 창에서 HTML 파일을 클릭하여 엽니다. 예를 들어 앱에 대한 HTML 파일이 MyApp.htm인 경우 이 파일을 클릭하여 엽니다.
Add the "msAudioCategory" 특성을 <audio> 태그에 추가하고 다음과 같이 특성을 Communications 또는 BackgroundCapabaleMedia로 설정합니다.
<audio msAudioCategory="BackgroundCapableMedia" controls="controls"> <source src="Somesong.mp3"/> </audio>비디오 스트림에 대해 msAudioCategory를 설정할 경우 다음 코드 조각을 사용하세요.
<video msAudioCategory="BackgroundCapableMedia" controls="controls"> <source src="Somevideo.mp4"/> </video >
단계 3: SystemMediaTransportControls 지원
Windows 8.1에서는 MediaControl 클래스를 대체하는 SystemMediaTransportControls 클래스가 도입되었습니다. 앱에서 SystemMediaTransportControls를 사용해야 합니다. 완전성을 위해 아래에는 MediaControl을 사용하여 백그라운드 오디오 지원을 구현하는 단계가 포함되어 있지만 SystemMediaTransportControls만 사용해야 합니다. SystemMediaTransportControls 사용 방법에 대한 자세한 내용은 시스템 미디어 전송 컨트롤을 사용하는 방법을 참조하세요.
앱이 백그라운드에서 오디오를 재생하도록 선언된 경우에도 앱은 isPlayEnabled 및 isPauseEnabled를 true로 설정하여 SystemMediaTransportControls 재생 및 일시 중지 단추를 사용하도록 설정해야 합니다. 또한 앱은 시스템 미디어 전송 컨트롤 단추를 눌렀을 때 앱에 알리는 buttonpressed 이벤트를 처리해야 합니다. 이 최소 이벤트 처리 지원을 제공하여 사용자가 앱을 포그라운드로 전환하지 않고 오디오를 재생하거나 일시 중지하도록 할 수 있습니다.
buttonpressed 이벤트 처리 외에도 일시 중지되거나 재생 중인 경우 등 미디어 상태가 변경될 때 SystemMediaTransportControls에 알려야 합니다. SystemMediaTransportControl에 미디어 상태 변경을 알리려면 playbackStatus 속성을 MediaPlaybackStatus의 값 중 하나로 설정합니다.
다음은 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)" />
SystemMediaTransportControls systemControls;
public MainPage()
{
this.InitializeComponent();
// Hook up app to system transport controls.
systemControls = SystemMediaTransportControls.GetForCurrentView();
systemControls.ButtonPressed += SystemControls_ButtonPressed;
// Register to handle the following system transpot control buttons.
systemControls.IsPlayEnabled = true;
systemControls.IsPauseEnabled = true;
}
다음은 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 속성을 업데이트하는 코드입니다.
// 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;
}
SystemMediaTransportControl에 대한 자세한 내용은 시스템 미디어 전송 컨트롤을 사용하는 방법 및 SystemMediaTransportControls 샘플을 참조하세요.
단계 4: 미디어 전송 컨트롤 등록(Windows 8)
중요
Windows 8.1에서 도입된 SystemMediaTransportControls 클래스는 이전 MediaControl 클래스를 대체합니다. MediaControl 대신 새 SystemMediaTransportControls를 사용해야 합니다. SystemMediaTransportControls 사용에 대한 자세한 내용은 시스템 미디어 전송 컨트롤을 사용하는 방법을 참조하세요.
앱이 음악 또는 동영상을 백그라운드에서 재생하도록 등록되어 있더라도 앱은 재생, 일시 중지 및 재생/일시 중지 단추에 대한 이벤트를 처리해야 합니다. 이 최소 이벤트 처리 지원을 제공하여 사용자가 응용 프로그램을 포그라운드로 전환하지 않고 음악 또는 동영상 스트림을 백그라운드에서 재생하거나 일시 중지하도록 할 수 있습니다.
미디어 단추를 앱에 등록하려면 MediaControl 개체를 만든 다음 이벤트 수신기를 개체에 추가해야 합니다. 그러면 개체는 지정된 이벤트를 수신할 수 있습니다. 또한 이벤트가 발생할 때 이벤트를 처리하기 위해 호출되는 함수를 정의해야 합니다.
솔루션 탐색기 창에서 앱의 JavaScript 파일을 클릭하여 엽니다. 예를 들어 앱의 JavaScript 파일이 MyApp.js인 경우 이 파일을 클릭하여 엽니다.
다음 코드를 사용하여 앱에 대한 재생, 일시 중지 및 재생/일시 중지 토글 단추를 등록합니다.
// Declare a variable that you will use as an instance of an object var mediaControls; // Assign the button object to mediaControls mediaControls = Windows.Media.MediaControl; // Add an event listener for the Play, Pause Play/Pause toggle button mediaControls.addEventListener("playpausetogglepressed", playpausetoggle, false); mediaControls.addEventListener(“playpressed”, playbutton, false); mediaControls.addEventListener(“pausepressed”, pausebutton, false);다음 코드를 사용하여 재생, 일시 중지 및 재생/일시 중지 토글 단추를 누를 때 발생하는 이벤트를 처리합니다.
// The event handler for the play/pause button function playpausetoggle() { if(mediaControls.isPlaying === true) { document.getElementById("audiotag").pause(); } else { document.getElementById("audiotag").play(); } } // The event handler for the pause button function pausebutton() { document.getElementById("audiotag").pause(); } // The event handler for the play button function playbutton() { document.getElementById("audiotag").play(); }
설명
미디어 전송 컨트롤을 사용하는 방법에 대한 자세한 내용은 시스템 전송 컨트롤 개발자 가이드 백서를 참조하세요.
참고 앱이 오디오 또는 동영상 스트리밍 이외에 다른 작업도 수행한다면 앱은 포커스를 잃고 더 이상 활성 창이 아닐 경우 미디어와 관련 없는 작업을 중지해야 합니다. 앱은 여전히 오디오를 스트리밍할 수 있지만 오디오-동영상 스트림의 경우 동영상 스트리밍이 자동으로 중지됩니다. 빠른 시작: 앱에서 비디오 재생
전체 예제
오디오 및 비디오를 스트림하는 방법에 대한 자세한 예는 재생 관리자 샘플 및 HTML 미디어 재생 샘플을 참조하세요.