HTML 쉽게 배우기 | 오디오 <audio>

오랜만이에요

 

오늘은 웹 페이지에 음악을 넣는 방법을 알려드릴게요

 

가끔 네이버에서 웹툰 볼 때 배경 음악을 들어본 적 있나요?

웹툰 제목은 기억 안 나는데, 언제 한번 납량특집으로 나온 웹툰에서 공포감을 극대화하기 위해서 배경 음악을 사용한 적이 있었어요

주인공이 버스 타고 어디 가는데 터널 안에서 어린아이의 모습을 한 귀신이 사람들 죽이고 뭐 그런 내용이었는데요

배경 음악 때문에 훨씬 더 무섭게 본 기억이 있네요

 

솔직히 이처럼 정말 특별한 콘텐츠가 아니고서는 웹사이트에서 음악을 사용하지는 않죠

그 이유 중 하나는, 음악 파일이 너무 크면 로딩하는데 시간이 걸리고 또 그만큼의 데이터를 사용하기 때문이죠

 

"그럼 알아볼 필요 없네요?"라고 하시면 할 말 없네요

 

굳이 이유를 대자면.... 재밌으니까?

 

 

 

 

그러면 오디오를 어떻게 사용하는지 볼게요

요소: <audio src=""></audio>

저번에 알아본 비디오처럼 src 가 필요합니다

 

src는 다른 사이트에서 제공하는 공유 URL, 또는 내 파일을 사용합니다

예: <audio src="mamamoo-aya.mp3"></audio>

 

비디오 요소처럼 추가 속성이 오디오에도 있습니다

controls - 오디오 재생, 볼륨 등 조절할 수 있는 컨트롤을 활성합니다
autoplay - 페이지 로드 시 음악을 자동 재생합니다
loop - 음악이 끝나면 자동 반복 재생합니다
muted - 음소거
preload - 음악이 어떤 방식으로 로드될지를 정합니다
*preload를 사용하지 않으면 기본 설정인 preload="auto"가 사용됩니다*
    auto - 페이지 로드 시 음악파일을 로드합니다
    metadata - 페이지 로드시 음악파일의 메타데이터만 로드합니다
    none - 페이지 로드시 음악파일을 로드하지 않습니다

 

 

이렇게 오디오 요소를 알아봤습니다

별거 없죠?

 

 

HTML 시리즈의 끝이 보이네요

앞으로 한 5~6 가지 정도 남았네요

지루하시더라도 조금만 더 버텨주시면 좀 더 재미있는 CSS 차례입니다

 

 

그럼, 오늘도 수고하셨습니다

 

끝!