< html 공부 > 4장. HTML의 태그 (2) - 멀티미디어(audio)
이번 장에서는 HTML의 멀티미디어 태그 중 하나인
audio 태그에 대해 다뤄보도록 하겠습니다!
◈ <audio>
-> HTML 파일에 소리 콘텐츠를 추가할 때 사용하는 태그
기본 구조 : <audio ~></audio>
오디오 태그는 말 그대로 오디오 콘텐츠를 HTML 파일에 추가하는 태그입니다.
<audio ~></audio>의 형식으로 작성할 수 있는데,
여기서 ~에 들어갈 수 있는 속성이 몇 가지 존재합니다.
첫 번째는 autoplay라는 자동 재생 방식의 속성입니다.
두 번째는 controls라는 플레이어를 화면에 띄워서 제어를 하는 방식의 속성입니다.
그리고 마지막은 바로 loop라는 무한 반복 방식의 속성입니다.
자동 재생?? 화면 제어?? 무한 반복??
한 번에 이해하실 수 있게 예시를 통해 다시 알려드리겠습니다!
jaeyonglee960212.github.io/tistory/
Cla in love Linda
jaeyonglee960212.github.io
이건 제가 티스토리를 위해 만든 github-page입니다.
바이러스 없으니 한 번 들어가서 보고 오세요 :) (HTML 4장 부분입니다!)
노래는 제가 좋아하는 유튜버이자 아프리카 TV BJ 다누리님(엄청 예쁘세요!)의
강아지 리액션 모음 영상에 나온 Cla in love Linda 행진곡을 사용했습니다!
출처 : [저작권 없는 음악] Cla in love Linda 행진곡, 행복, 달달, 귀여움 (no copyrightless music, happy, BGM) - MY CAT TV
출처 : 강아지 리액션 모음 - 다누리
홈페이지 들어가 보셨나요?
들어가서 보시면 controls와 loop밖에 없는걸 확인하실 수 있으실 텐데요!
왜 autoplay는 없나 싶으시죠?
그 이유는 현재 최신 크롬에서
위의 코드대로 사용한 autoplay를 지원하지 않기 때문에
일부러 뺀 것이니 이 점 참고하여 주시기 바랍니다!
웨않돼...
autoplay를 다루지 못해 무척이나 아쉽지만,
아쉬운 대로 controls에 대해 얘기해보겠습니다.
contorls는 보시는 바와 같이, 플레이어의 형태로 나타나게 되며 play(▶) 버튼을 눌러 재생할 수 있습니다.
눈치가 빠르신 분들은 눈치채셨죠?
맞습니다!
controls랑 똑같이 플레이어의 형태로 나오고 있죠?
왜 그럴까요?
그건 바로 loop 코드에 controls를 추가했기 때문입니다!
controls를 추가한 이유는 loop의 경우 음악이 재생된 후 그 음악이 끝나야 반복이 될 수 있는데,
controls를 이용해 플레이어를 추가하지 않으면 노래를 재생할 수가 없기 때문에,
controls와 loop를 같이 작성하였습니다!
이제 이해가 가시죠?
혹시나 아직 이해가 부족하신 분들을 위해 최종적으로 정리해드리겠습니다!