웹프로그래밍 HTML/태그와 멀티미디어

<audio> 태그

별초롱언니 2025. 3. 5. 17:39

▣ <audio> 태그

· 웹 페이지에 오디오 파일을 삽입하는 태그

   <audiosrc="audio_file.mp3"controlsloopautoplay></audio>

 

<audio> 태그 속성

· src : 재생할 오디오 파일이 저장된 경로 표시

· loop : 반복 재생

· muted : 음소거 상태로 시작 

· controls : 재생 제어기 표시

· autoplay : 웹 문서가 열림과 동시에 자동으로 재생

· preload : 오디오 파일 사용 여부와 상관없이 미리 다운로드함

 

▣<source> 태그

· 여러 형식의 오디오 파일을 동시에 제공할 때 사용

· 재생에 적합한 파일이 없다면 마지막 문장 출력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>오디오 삽입하기</title>
</head>
<body>
    
    <h3>오디오 자동 재생</h3>
    <audio src="bear.m4a" controls loop autoplay></audio>

    <h3>오디오 수동 재생</h3>
    <audio src="chicken.mp3" controls></audio>

    <h3>오디오 다중 재생</h3>
    <audio controls>
        <source src="eagle.mp3" type="audio/mpeg">
        <source src="eagle.ogg" type="audio/ogg">
        <source src="eagle.wav" type="audio/wav">
        오디오 파일을 재생할 수 없습니다.
    </audio>

</body>
</html>