HTML5 오디오 요소 시작

.NET Framework 3.0

Windows Internet Explorer 9은 HTML5 오디오를 새롭게 지원했습니다.audio 요소를 사용하면 스크립트나 추가 기능 컨트롤 없이도 웹 페이지에 기본 오디오 플레이어를 추가할 수 있습니다.

가장 간단한 형태의 오디오 재생

웹 페이지에 오디오를 추가하는 기본 방법은 audio 요소를 사용하는 것입니다. 대부분의 새 HTML5 지원과 마찬가지로, audio 요소를 사용하면 이전 브라우저와 같이 사용자 브라우저에서 HTML5 audio 요소를 지원하지 않는 경우 오류 메시지나 다른 재생 기술로 대체할 수 있습니다. 다음 예제에 보여진 것처럼 audio 태그 사이에 오류 메시지를 넣거나 Silverlight 브라우저 플러그 인과 같은 외부 플레이어 컨트롤용 코드를 삽입할 수 있습니다. 다음 코드 예제에서는 오디오 파일을 재생하는 간단한 웹 페이지를 볼 수 있습니다.


<!doctype html>  
<html>
<head>
    <title>Audio Element Sample</title>
    <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet site. -->    
    <!--  <meta http-equiv="X-UA-Compatible" content="IE=9"/> --> 
</head>
<body>
    <h1>Audio Element Sample</h1>
    
    <!-- Display the audio player with control buttons. -->
    <audio src="demo.mp3" controls autoplay loop> 
        HTML5 audio not supported
    </audio>
</body>
</html>


audio 요소는 재생할 오디오 파일을 지정하는 src 속성과 기본 제공 플레이어 컨트롤이 사용되도록 하는 controls 특성을 사용하여 HTML 코드에 직접 추가됩니다. 브라우저의 내장 플레이어를 사용하는 경우에는 추가 스크립트가 필요하지 않습니다. 내장 플레이어는 스타일이나 기능이 브라우저마다 다를 수 있습니다.

Internet Explorer 9에서 audio 요소는 기본 재생, 일시 중지, 위치 슬라이더 및 볼륨 컨트롤이 있는 간단한 플레이어를 표시합니다. 재생 시간과 파일의 남은 시간도 플레이어에 표시됩니다. 시간 표시를 마우스로 가리키면 30초 앞이나 뒤로 건너뛸 수 있습니다.

Internet Explorer 9의 HTML5 오디오 플레이어 그림

Internet Explorer 9의 오디오 요소는 autoplayloop, 이렇게 두 가지 다른 특성을 지원합니다. autoplay는 Windows Internet Explorer가 audio 개체를 로드한 후 즉시 오디오 파일을 로드하여 재생하도록 지시합니다. 이 특성은 bgsound HTML 요소를 사용하는 것과 유사합니다. bgsound와 달리, pauseplay 컨트롤은 웹 페이지 사용자들이 사운드를 끌 수 있도록 해줍니다. loop 특성은 계속해서 사운드 파일을 처음부터 재생합니다. 감성 컨트롤이 필요하지 않은 경우에는 특성을 사용하지 마세요.

예제에서 "demo.mp3" 파일은 고유한 파일의 자리 표시자입니다. 오디오 파일과 웹 페이지의 소스 코드가 같은 디렉터리에 있는 경우 파일 이름만 지정해도 됩니다. 오디오 파일이 다른 디렉터리에 있는 경우 "music\demo.mp3"와 같이 경로를 포함합니다. 파일이 다른 사이트에 있는 경우 정규화된 도메인 및 경로(예: "http:\\www.contoso.com\music\demo.mp3")를 사용합니다.

HTML만으로 audio 요소를 구현할 수도 있지만 스크립트를 사용하면 고유한 단추를 사용하거나 재생 목록을 만들거나 재생에 상태를 추가하여 웹 페이지를 향상시킬 수 있습니다. audio 요소의 스크립트에 대한 자세한 내용은 JavaScript를 사용하여 오디오 개체 제어를 참조하세요.

참고  인트라넷에서 개발하는 경우 HTML5에 대한 렌더링 문제가 있으면 <meta http-equiv-“X-UA-Compatible” content=”IE=9”/>를 웹 페이지의 <head> 블록에 추가하여 Internet Explorer 9에서 최신 표준을 사용하도록 할 수 있습니다. 원하는 경우 meta http-equiv-"X-UA-Compatible" 헤더를 IE=9과 함께 보내도록 웹 개발 서버를 구성합니다. 문서 호환성에 대한 자세한 내용은 문서 호환성 정의를 참조하세요.

API 참조

HTML5 Audio and Video

샘플 및 자습서

JavaScript를 사용하여 오디오 개체 제어
미디어 이벤트를 사용하여 진행률 표시줄 추가
두 개 이상의 오디오 파일 형식 지원

Internet Explorer 테스트 드라이브 데모

오디오 폭발
HTML5 오디오 플레이어 + XML 재생 목록
IE Beatz
반딧불이

IEBlog 게시물

HTML5 <audio> 기능 활용
동일한 태그: <canvas>, <audio> 및 <video> 사용

사양

HTML5: 섹션 4.8.7

관련 항목

HTML5 오디오 기능 활용
HTML5의 기본 오디오

 

 

표시:
© 2014 Microsoft. All rights reserved.