오디오 삽입: <audio>

3.1 <audio> 태그 기본

HTML5의 <audio> 태그는 웹 페이지에 오디오 파일을 삽입하는데 사용돼. 이 요소는 다양한 오디오 포맷을 지원하고 사용자에게 재생, 일시 정지 및 볼륨 조절을 위한 내장 컨트롤러를 제공해.

간단한 예제

<audio> 태그는 오디오 파일의 경로를 지정하는 src 속성과 함께 사용돼. 또한 표준 컨트롤러(재생, 일시 정지 버튼 및 볼륨 조절)를 표시하기 위해 controls 속성을 추가할 수 있어.

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

여러 소스 예제

다양한 브라우저 지원을 제공하기 위해 <source> 태그를 사용하여 여러 오디오 소스를 지정할 수 있어. 이렇게 하면 브라우저가 지원하는 오디오 포맷을 선택할 수 있게 돼.

    
      <audio controls>
        <source src="audiofile.mp3" type="audio/mpeg">
        <source src="audiofile.ogg" type="audio/ogg">
        Your browser does not support the audio element.
      </audio>
    
  

<audio> 태그 속성

• src: 오디오 파일 경로를 지정해.
• controls: 재생 컨트롤러를 표시해
• autoplay: 페이지 로드 시 자동으로 오디오를 재생해
• loop: 오디오가 끝나면 반복 재생해
• muted: 로드 시 음소거해
• preload: 브라우저가 오디오를 어떻게 로드해야 하는지 지정해. 가능한 값: none, metadata, auto

3.2 속성 사용 예제

controls 속성

controls 속성은 "Play", "Pause" 버튼 및 볼륨 조절기를 포함한 표준 오디오 재생 컨트롤을 추가해. 이 속성은 오디오 요소를 보다 상호 작용적이고 사용자에게 친숙하게 만들어줘.

예제:

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

autoplay 속성

autoplay 속성은 페이지 로드 직후 오디오 파일이 자동으로 재생되도록 해. 이 속성을 사용할 때는 주의가 필요해, 왜냐하면 갑작스러운 오디오 재생은 사용자에게 짜증을 줄 수 있거든.

예제:

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

loop 속성

loop 속성은 오디오 파일을 무한 반복 재생하도록 지정해. 이것은 백그라운드 음악이나 반복적으로 재생되어야 하는 사운드 효과에 유용해.

예제:

    
      <audio src="audiofile.mp3" autoplay loop></audio>
    
  

muted 속성

muted 속성은 오디오 파일이 로드될 때 소리를 끄도록 해. 이것은 사용자가 필요에 따라 소리를 켜고 싶을 때 기본적으로 소리 없이 오디오가 재생되도록 하려는 경우에 유용해.

    
      <audio src="audiofile.mp3" muted></audio>
    
  

preload 속성

preload 속성은 브라우저가 페이지 로드 시 오디오 파일을 어떻게 로드해야 하는지를 지정해줘. 이 속성은 세 가지 값 중 하나를 가질 수 있어:

• none: 브라우저가 오디오를 미리 로드하지 않아
• metadata: 브라우저가 메타데이터(길이, 크기 등)만 로드해
• auto: 페이지가 로드될 때 브라우저가 오디오를 완전히 로드해

    
      <audio src="audiofile.mp3" preload="auto"></audio>
    
  

3.3 지원되는 오디오 포맷

크로스 브라우저 호환성을 위해 여러 오디오 포맷을 사용하는 것이 좋다구. 가장 일반적인 포맷에는 MP3, OGG 및 WAV가 포함돼. 더 자세히 살펴보자.

MP3 포맷

MP3 (MPEG-1 Audio Layer III) – 가장 인기 있는 오디오 포맷 중 하나야. 대부분의 브라우저와 기기가 지원하지. MP3는 손실 압축을 사용하므로 파일 크기를 줄이면서도 꽤 높은 음질을 유지할 수 있어.

예제:

    
      <audio src="audiofile.mp3" type="audio/mpeg"></audio>
    
  

OGG 포맷

OGG (Ogg Vorbis) – 손실 압축 오디오의 오픈 포맷으로, 대부분의 최신 브라우저에서 지원돼. 이 포맷은 좋은 음질을 제공하며 MP3의 대안으로 자주 사용돼.

예제:

    
      <audio src="audiofile.ogg" type="audio/ogg"></audio>
    
  

WAV 포맷

WAV (Waveform Audio File Format) – 비압축 오디오 포맷으로, 높은 음질을 제공해. 그러나 WAV 파일은 MP3나 OGG에 비해 용량이 더 커서 웹에서는 덜 사용돼.

예제:

    
      <audio src="audiofile.wav" type="audio/wav"></audio>
    
  

3.4 포맷 호환성

모든 브라우저가 동일한 오디오 포맷을 지원하는 것은 아냐. 크로스 브라우저 호환성을 위해 여러 오디오 포맷인 MP3, OGG, WAV를 사용하는 것이 좋다구.

다중 포맷 지원 예제:

    
      <audio controls>
        <source src="audiofile.mp3" type="audio/mpeg">
        <source src="audiofile.ogg" type="audio/ogg">
        <source src="audiofile.wav" type="audio/wav">
        Your browser does not support the audio element.
      </audio>
    
  

접근성

<audio> 요소나 오디오 파일을 지원하지 않는 브라우저의 경우를 대비해 텍스트 대체를 제공해야 해. 이는 <audio>의 여는 태그와 닫는 태그 사이의 텍스트를 사용하여 가능해.

접근성 예제:

    
      <audio controls>
        <source src="audiofile.mp3" type="audio/mpeg">
        <source src="audiofile.ogg" type="audio/ogg">
        <source src="audiofile.wav" type="audio/wav">
        Your browser does not support the audio element.
        You can download the audio file <a href="audiofile.mp3">here</a>.
      </audio>
    
  

<audio> 태그와 그 API의 활용 가능성을 이해하면 보다 상호 작용적이고 접근 가능한 웹 페이지를 만들 수 있어.