Skip to main content Skip to docs navigation

오디오

기존에는 웹을 통하여 오디오를 출력하기 위해서는 별도의 플러그인을 설치하여야 했습니다. 하지만, html5 에서는 웹 브라우져로 오디오를 쉽게 출력을 할 수 있습니다.

오디오 테그

html5는 오디오를 출력하기 위해서 audio 테그를 지원합니다.

<audio> </audio>

오디오 테그는 익스플로어 8 이하에서는 사용할 수 없습니다.

소스 속성

먼저 오디오 셈플 파일을 준비합니다. 테그의 속성을 이용하여 오디오파일의 리소스 경로를 설정합니다.

<audio src="파일명"> </audio>

웹브라우저가 로딩되면, 자동으로 오디오가 출력이 됩니다.

오디오 파일셈플 NCS 뮤직

autoplay

음악을 자동으로 재생을 할 것인지를 설정할 수 있습니다.

제어속성

오디오 파일이 재생이 될때, 이를 제어가 필요할 경우가 있습니다. 오디오 파일의 재생을 컨트롤 하기 위해서는 controls 속성을 부여해 주어야 합니다.

<audio src="파일명" controls> </audio>
또는
<audio src="파일명" controls="controls"> </audio>

재생을 위한 컨트롤 제어판이 같이 출력이 됩니다.

preload

오디오를 재생하기 전에 필요한 파일을 모두 다운로드 할지를 설정 합니다.

loop

오디오의 반복 재생 여부를 설정할 수 있습니다.

소스 설정

일부 웹 브라우저는 오디오 파일이 정상적으로 재생이 되지 않을 수도 있습니다. 이를 위해서는 브라우저에서 지원하는 오디오 파일이 서로 다르기 때문 입니다.

이 문제를 해결하기 위해서 source 테그를 같이 사용을 합니다.