웹에 오디오 구현하기

웹에 video 태그를 활용하여 비디오를 넣은 것처럼 audio 태그를 활용하면 오디오를 구현할 수 있다. 최근에는 음악 저작권이 워낙 강화되다보니 웹사이트에서 음악이 나오는 상황을 보기 힘들지만, 예전에는 웹사이트에 접속할 때 음악이 나오곤 했다.

audio 태그 활용해 음악 재생하기

CONTENTS

video 태그와 유사한 audio 태그

웹에서 오디오를 구현하는 것은 비디오를 구현하는 것과 매우 유사하다.

코드만 봐도 video 태그가 audio 태그로 바뀔었을 뿐, souce태그에 src 속성을 사용해 경로를 넣고 type속성에 오디어 형태를 기입하는 것까지 유사하다. 여기에 audio 태그에 controls, autoplay, muted 속성까지 비디오와 동일하게 작동한다.

video 태그와 다른 audio 태그 속성

오디오 구현이 비디오 구현과 유사하고, 태그 및 속성까지 공용으로 사용하는 게 많다. 하지만 audio 태그는 video 태그보다 사용할 수 있는 속성에 제한이 있다.

대표적으로 video태그에서는 width, height를 사용할 수 있었지만, audio태그에서는 너비나 높이를 지원하지 않는다. 또한 처음 화면에 보이는 poster 속성도 audio 태그에는 지원하지 않는다. 즉, 비디오를 구현할 때 사용하는 시각적인 요소가 오디오에는 필요하지 않으므로, 이러한 시각적인 속성 요소는 audio 태그에서는 지원하지 않는다. 물론 audio 태그에 loop, preload 속성은 가능하다.

오디오 구현 실례

아래는 1초 동안 동물인 말 소리가 들리는 오디오를 구현한 코드이다. 오디어를 담을 때는 기본적으로 muted 속성을 사용해, 갑작스럽게 외부에 소리가 나오지 않도록 해야 한다. 여기에서도 즉시 오디오가 실행하면서도 소리는 들리지 않는다.

</audio>

웹에 유튜브 담기

웹에 유튜브를 구현할 때는 일반적으로 iframe 태그를 사용한다. 이는 임베딩 기술과 연관하는 분야로 다음편에서 embed 태그 및 object 태그를 살펴본다. 여기에서는 오늘날 매우 흔하게 사용하는 유튜브를 웹사이트에서 구현하는 코드만 살펴본다.

보통 유튜브 영상에서 오른쪽 마우스를 누른 후에 소스 코드 복사를 하면 위와 같은 코드 형태이다. 이를 그대로 웹에 코딩을 하면 유튜브 영상을 구현할 수 있다. 기본적으로 유튜브 영상은 비디오와 동일하게 시각적인 요소가 있으므로, width 및 height 속성을 지원한다. 또한 경로는 src 속성에 담아 표현한다.

추가적으로 알아둘 사항은 0은 NO이고 1은 YES이다.

iframe 태그에 src 속성으로 유튜브 경로를 담는데, 이때 ? 기호 다음에 video 또는 audio 태그에서 살펴본 속성을 추가하는 형태이다. 이때 속성값 1은 yes의미이고, 0은 no 의미라고 간주하면 이해하기 수월하다. 즉, 위의 코드는 autoplay 즉 자동재생이 yes이고 mute 즉 음소거가 yes라는 의미이다.

iframe 코드로 유튜브 영상 구현하기 W3Schools 바로가기

이외에 자주 사용하는 속성으로 loop가 있는데, 역시 src에 담긴 경로 ? 기호 다음에 속성이 여러 개라면 &으로 연결하는 형태로 사용한다. 이때 loop=1이면 무한반복을 의미하고 loop=0이면 무한반복이 no이므로 한 번만 재생한다.

controls=0은 비디오 플레이어에서 컨트롤을 표시하지 않는 것익, controls=1은 컨트롤하는 디스플레이를 표시하는 것이다.

즉, iframe에서 너비와 높이를 지정하는 속성은 단독으로 표현하고, 나머지 속성은 src 속성값에서 ? 기호 다음에 넣어서 사용한다. 이때 속성값 1은 yes의미이고, 0은 no 의미라고 생각하자.

위에 영상은 무한루프를 건 유튜브 영상이다. 처음에는 동작하지 않지만 동작을 실행하면 이후부터는 무한 반복한다. 그런데 여기에서 코드를 보면 ? 다음에 palylist속성에 경로(파일)를 한번 더 입력하고 있어야만 유튜브 영상이 끝난 후에 다음 장면으로 넘어가지 않고, 동일한 영상을 반복한다.

저작자표시 비영리 변경금지