Share via

빠른 시작: 앱에 오디오 추가(HTML)

  • 아티클

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

이 항목에서는 오디오 스트리밍 범주를 설명하고 <audio> 태그를 사용하여 오디오 스트리밍 기능을 앱에 추가하는 방법을 보여 줍니다.

Windows 8에서는 HTML5를 비교적 쉽게 사용하여 Windows 스토어 앱에 오디오 스트리밍 기능을 추가할 수 있는 플랫폼을 제공합니다.

audio 태그에는 다음 특성이 있습니다.

특성 허용되는 값 설명
autoplay autoplay 준비되는 즉시 오디오에서 재생이 시작되도록 지정합니다.
컨트롤 컨트롤 오디오 컨트롤(예: 재생/일시 중지 단추 등)이 표시되도록 지정합니다.
loop loop 오디오가 완료될 때마다 다시 시작되도록 지정합니다.
preload

자동

metadata

없음

 페이지가 로드될 때 오디오가 로드될지 여부 및 만든 이의 생각을 지정합니다.
src <file path> 오디오 파일의 경로를 지정합니다.

 

Microsoft는 오디오 인식 앱의 동작을 개선하기 위해 사용할 수 있는 추가 특성인 msAudioCategory를 제공합니다. 다음 표에서는 이 특성의 허용되는 값 및 간단한 내용 설명을 제공합니다.

스트림 범주 설명 배경 사용 가능?
alert 루핑 및 더 긴 실행 경고음:
  • 알람
  • 신호음
  • 벨 울림 알림
  • 기존 오디오를 줄이기 위해 필요한 사운드
 아니요
BackgroundCapableMedia 배경에서 계속 재생해야 하는 오디오용. 다음과 같은 로컬 미디어 재생 시나리오를 예로 들 수 있습니다.
  • 로컬 재생 목록
  • 스트리밍 라디오
  • 스트리밍 재생 목록
  • 뮤직 비디오
  • 스트리밍 오디오/라디오, YouTube, Netflix 둥
 예
통신 다음과 같은 스트리밍 통신 오디오용:
  • VOIP
  • 실시간 채팅 또는 기타 전화 통화 유형
 예
ForeGroundOnlyMedia 전경에서만 작동하도록 디자인된 게임이나 기타 사운드. 그러나 기존 배경 미디어 사운드를 음소거함.
  • 게임 환경에 필요한 게임 오디오(춤 게임, 음악 게임)
  • 장편 영화(배경으로 이동할 경우 일시 중지되도록 디자인됨)
 아니요
GameEffects 기존 오디오와 혼합하도록 디자인된 게임 사운드 효과
  • 캐릭터 대화
  • 모두 음악이 아닌 사운드
 아니요
GameMedia 게임에서 재생하는 배경 음악 아니요
SoundEffects 기존 오디오와 혼합하도록 디자인된 게임 또는 기타 사운드 효과
  • 캐릭터 대화
  • 경고음, 짧은 사운드
 아니요
기타 기본 오디오 유형. 배경에서 계속 재생할 필요가 없는 모든 오디오 미디어에 권장됨. 아니요

 

목표: 가장 간단한 방법을 사용하여 Windows 스토어 앱에 오디오 기능을 추가합니다.

사전 요구 사항

HTML, JavaScript, Windows 이벤트와 이벤트 처리에 대해 잘 알고 있어야 합니다.

MP3(MPEG-Layer 3) 또는 다른 디지털 음악 파일을 재생할 수 있는 미디어 플레이어가 설치되어 있어야 합니다.

완료 시간: 15 분.

지침

<audio> 태그에 오디오 추가

<audio> 태그를 추가할 때 "controls" 특성을 사용하여 컨트롤(단추)을 표시할 것임을 나타내야 합니다. 다음 단계에서 수행 방법을 보여줍니다.

  • 다음 코드를 복사하고 HTML 파일에서 오디오 컨트롤을 표시할 위치에 붙여넣습니다.

    // Adding the <audio> tag to your app
<audio controls="controls"> 
<source src="song.mp3"/> 
</audio>

msAudioCategory 특성 추가

<audio> 태그에 msAudioCategory 특성을 추가하여 기능을 추가할 수 있습니다. msAudioCategory 특성은 향상된 특정 동작을 오디오 태그에 연결하므로 앱의 사용자 환경을 개선합니다. 다음 단계에서는 msAudioCategory 특성을 추가하는 방법을 보여 줍니다.

  • 다음과 같이 <audio> 태그 내에 msAudioCategory 특성을 추가합니다.

    // Enhancing behavior of audio tag
// with the msAudioCategory attribute
<audio msAudioCategory="BackgroundCapableMedia" controls="controls"> 
<source src="song.mp3"/> 
</audio>

요약 및 다음 단계

스트림의 범주는 매우 주의해서 선택해야 합니다. 선택에 따라 앱의 동작이 달라집니다.

다음 항목 미디어 제어를 위한 키를 구성하는 방법에서는 Windows 스토어 앱의 미디어 단추를 추가 및 구성하는 방법을 보여 줍니다. 그런 다음 이러한 단추를 사용하여 오디오 스트림을 재생, 일시 중지, 중지 또는 빨리 감을 수 있습니다.

관련 항목

미디어 제어를 위한 키를 구성하는 방법

미디어를 위한 키 구성 샘플

재생 관리자 샘플