HTML 오디오(audio) 속성 태그 삽입 방법

 

웹페이지에서 이미지와 텍스트만으로 정보를 전달하기 부족하거나 아쉬울 때가 있습니다. 보다 흥미롭고 생생한 정보를 전달하기 위해 다양한 멀티미디어 파일을 사용하기도 하지만 비디오와 오디오 태그 사용으로 유튜브를 연결할 수 있습니다. 

 

HTML <audio> 태그 

웹에서 지원하는 비디오 파일 형식은 MP4, WebM, OGG 등이 있습니다. OGG 파일은 사파리 브라우저에서 지원하지 않습니다. 오디오 파일을 연결하는 방법은 오디오 태그와 함께 사용하는 속성과 속성값이 있습니다. MP3파일이 없다면 유튜브의 NCS채널은 NoCopyrightSounds(저작권 없는 사운드)를 운용하는 채널로 MP3 파일을 다운로드할 수 있습니다.  

 

 

1. <audio 태그를 입력합니다.
2. audio 파일에 플레이, 스톱, 사운드 조절 기능을 부여하는 controls 속성
3. 자동 실행 기능을 부여하는 autoplay 속성을 입력하고 >로 닫습니다.
4. <source 태그를 입력하는데, src 속성과 속성값으로 내 컴퓨터 오디오 파일 위치 경로와 오디오 파일 이름 확장자를 입력합니다. 
5. type 속성과 audio/mpeg 속성값을 입력하고 >로 닫습니다.
6. 끝나는 </audio> 태그로 닫고 마무리합니다.

 

HTML 속성 입력

내 컴퓨터에 저장된 볼보 자동차 광고 사운드트랙을 예시를 넣었습니다. source src="오디오파일위치", type은 audio/mpeg입니다. 비주얼 스튜디오 코드에서는 마우스 우측 클릭 후 [Open with live server]를 실행합니다.

<audio controls autoplay>
<source src="C:\Users\김\Desktop\노래\볼보-커머셜BGM type="audio/mpeg"></audio>

 

[음원 파일 테스트]