💡 퀵 접속: htm.kr/audio

HTML5 Audio 태그 사용법

1. Audio 태그란?

Audio 태그는 웹 페이지에 오디오를 삽입하는 데 사용됩니다. 다양한 오디오 형식을 지원하며, 재생 제어, 자막, 미디어 소스 등을 지정할 수 있습니다.

2. 기본 구조

Audio 태그의 기본 사용법

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

3. 자주 사용되는 속성

속성 설명 예시
controls 재생 컨트롤 표시 <audio controls>
autoplay 자동 재생 <audio autoplay>
loop 반복 재생 <audio loop>

4. 실제 사용 예제

<!-- 기본 오디오 예제 -->
<div class="basic-example">
    <h3>기본 오디오 예제</h3>
    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        <source src="audio.ogg" type="audio/ogg">
        브라우저가 오디오를 지원하지 않습니다.
    </audio>
</div>

<!-- 자동 재생 예제 -->
<div class="autoplay-example">
    <h3>자동 재생 예제</h3>
    <audio autoplay muted>
        <source src="audio.mp3" type="audio/mpeg">
        <source src="audio.ogg" type="audio/ogg">
        브라우저가 오디오를 지원하지 않습니다.
    </audio>
</div>

<!-- 반복 재생 예제 -->
<div class="loop-example">
    <h3>반복 재생 예제</h3>
    <audio controls loop>
        <source src="audio.mp3" type="audio/mpeg">
        <source src="audio.ogg" type="audio/ogg">
        브라우저가 오디오를 지원하지 않습니다.
    </audio>
</div>

<style>
    /* 기본 오디오 예제 스타일 */
    .basic-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 자동 재생 예제 스타일 */
    .autoplay-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 반복 재생 예제 스타일 */
    .loop-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        .basic-example,
        .autoplay-example,
        .loop-example {
            margin: 10px 0;
            padding: 10px;
        }
    }
</style>

💡 주의사항

  • audio 태그는 다양한 오디오 형식을 지원합니다.
  • controls 속성은 사용자에게 재생 컨트롤을 제공합니다.
  • autoplay 속성은 사용자 경험을 고려하여 사용해야 합니다.
  • 브라우저 호환성을 고려해야 합니다.

5. 스타일링 예제

<style>
    /* 기본 오디오 스타일 */
    audio {
        width: 100%;
        max-width: 800px;
        height: auto;
        border-radius: 4px;
    }

    /* 컨트롤 스타일 */
    audio::-webkit-media-controls {
        background-color: rgba(0, 0, 0, 0.7);
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        audio {
            max-width: 100%;
        }
    }
</style>

6. 성능 최적화 팁

  • 적절한 오디오 형식을 선택합니다.
  • 오디오 파일을 최적화합니다.
  • 지연 로딩을 고려합니다.
  • 불필요한 오디오 로딩을 피합니다.

7. 검증 및 테스트

audio 태그가 올바르게 사용되었는지 확인하는 방법:

  • W3C 마크업 검증 서비스 사용
  • 다양한 브라우저에서 테스트
  • 다양한 오디오 형식 테스트
  • 오디오 로딩 테스트
  • 접근성 검사 도구 사용