[HTML] audio태그

 

 

웹 페이지에서 오디오 파일을 재생할 수 있도록 HTML에서는 audio 태그를 제공합니다.

audio 태그는 웹 페이지에서 오디오 콘텐츠를 삽입하는 데 유용한 도구입니다.

audio 태그를 활용해 오디오를 삽입하고 제어하는 방법을 정리해보겠습니다.

 

 

audio 태그의 기본 개념

audio 태그는 HTML5에서 도입된 태그로, 브라우저에서 오디오 파일을 직접 재생할 수 있게 해줍니다.

 

기본 문법

<audio>
    <source src="audio파일경로" type="오디오파일형식">
    브라우저가 오디오를 지원하지 않을 때 표시할 텍스트
</audio>

 

 

 

 

주요 속성 및 사용 방법

오디오 태그는 다양한 속성을 가지고 있습니다. 사용자의 경험을 고려해 선택해서 사용해야 합니다.

 

• src 속성 
  • 직접 파일 경로를 지정하는 속성입니다.

<audio src="example.mp3" controls> </audio>

 

• controls 속성
  • 재생/일시 정지 버튼/볼륨 조절 등 기본 컨트롤이 표시되는 속성입니다.

<audio src="example.mp3" controls> </audio>

 

• autoplay 속성
  • 페이지 로드 시 자동으로 오디오를 재생하는 속성입니다.

<audio src="example.mp3" autoplay> </audio>

 

• loop 속성
  • 오디오 파일이 반복 재생되는 속성입니다.

<audio src="example.mp3" controls loop> </audio>

 

• muted 속성
  • 오디오 자동으로 음소거 상태로 설정하는 속성입니다.

<audio src="example.mp3" controls muted> </audio>

 

---

★ 체크 포인트 ★

1.autoplay와 브라우저 정책

일부 브라우저에서는 자동 재생을 제한하는 정책이 있습니다.

특히, 음소거 상태가 아닌 경우 autoplay가 제대로 작동하지 않을 수 있으므로 유의해야 합니다.

 

2. 파일 형식 호환성

브라우저마다 지원하는 오디오 파일 형식이 다릅니다.

일반적으로는 mp3와 ogg를 함께 제공하는 것이 호환성을 높이는 데 유리합니다.

<audio controls>
    <source src="example.mp3" type="audio/mpeg">
    <source src="example.ogg" type="audio/ogg">
    브라우저가 오디오를 지원하지 않습니다
</audio>

 

3. 경로 설정 주의

파일 경로를 잘못 설정하면 오디오가 재생되지 않습니다.

상대 경로와 절대 경로의 차이를 이해하고 정확히 입력해야 합니다.