[HTML/CSS] audio 태그를 사용한 음악 삽입과 디자인 방법

audio 태그란?

HTML5에서는 음악과 같은 멀티미디어를 삽입하는 방법으로 audio 태그가 도입되었습니다. audio 태그는 소리를 재생하는 웹기술로, 오디오 파일을 삽입할 수 있으며, 다양한 속성을 활용하여 적절한 사운드 디자인을 구성할 수 있습니다.

audio 태그의 속성

audio 태그에는 여러 가지 속성이 있습니다. 아래 예시 코드를 참고해보세요.

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

• src: 음악 파일의 URL을 지정합니다.
• controls: 오디오 재생용 컨트롤러를 표시합니다.
• preload: 오디오 파일의 로딩 방법을 설정합니다. "auto"를 사용하면 자동으로 로딩되며, "none"은 수동으로 로딩되게 합니다.

audio 태그를 이용한 음악 삽입 방법

로컬 파일을 이용한 음악 삽입

먼저, 로컬 파일을 이용하여 음악을 삽입하는 방법을 살펴봅시다. 아래 예시 코드를 참고하세요.

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

• source: 다양한 포맷의 음악 파일을 지원하기 위해 source 태그를 사용합니다.
• type: 음악 파일의 포맷을 명시합니다.
• Your browser does not support the audio tag.: 오디오 태그를 지원하지 않는 브라우저에서는 이 메시지가 출력됩니다.

외부 파일을 이용한 음악 삽입

다음으로, 외부 파일을 이용하여 음악을 삽입하는 방법입니다. 아래 예시 코드를 참고해주세요.

<audio controls>
  <source src="https://example.com/audio.mp3" type="audio/mpeg">
  <source src="https://example.com/audio.ogg" type="audio/ogg">
  Your browser does not support the audio tag.
</audio>

로컬 파일을 삽입하는 방법과 유사하지만, source 태그에 외부 파일의 URL을 지정해줍니다. 이렇게 하면, 서버 공간을 절약할 수 있으며, 관리도 쉬워집니다.

audio 태그를 이용한 사운드 디자인

이제, audio 태그를 이용하여 음악을 삽입하는 방법을 알아보았으니, 이를 꾸며보겠습니다. audio 태그를 이용하여 다양한 사운드 디자인을 만들 수 있습니다.

오디오 태그를 이용한 음량 조절

음악의 볼륨을 조절하기 위해서는, volume 속성을 이용할 수 있습니다. volume 속성은 0.0에서 1.0 사이의 값을 갖으며, 0.0은 음소거, 1.0은 최대 음량을 의미합니다.

<audio controls volume="0.5">
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

오디오 태그를 이용한 반복 재생

반복 재생을 위해서는 loop 속성을 이용합니다.

<audio controls loop>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

오디오 태그를 이용한 자동 재생

자동 재생을 위해서는 autoplay 속성을 이용합니다.

<audio controls autoplay>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>