자신의 일은 스스로하자

[HTML] #7 오디오 태그 [광주인공지능학원] 본문

HTML, CSS

[HTML] #7 오디오 태그 [광주인공지능학원]

힐파르 사막 삼계탕 2021. 7. 26. 03:18
728x90

 

오디오 태그

오디오 태그는 웹 브라우저에서 플러그인의 도움 없이 음악을 재생할 수 있게 만들어주는 HTML 태그입니다. 이 기능은 HTML5에서 추가된 기능이어서 인터넷 익스플로러 8 이하에서는 사용할 수 없습니다.

 

audio 태그 속성

: 오디오 태그에 속성이 많습니다. 이 중에서 중요 속성만 설명드립니다.

<srs>

-> 음악파일의 경로 지정

<preload>

-> 음악을 재생하기 전에 모두 불러올지 지정

<autoplay>

-> 음악을 자동 재생할지 지정

<loop>

-> 음악을 반복할지 지정

<controls>

-> 음악 재생 도구를 출력할지 지정

 

재생 시킬 노래는 브레이브걸스의 Rollin입니다.

<body> 
    <audio src="rollin.mp3" controls></audio>
</body>

* 오디오 파일을 미리 HTML 파일과 같은 폴더 안에 넣어두었습니다.

 

위 코드를 실행시키면 아래와 같이 컨트롤러와 함께 음악이 출력됩니다.

 

동영상 입니다.
<body> 
    <audio src="rollin.mp3" controls loop></audio>
</body>

loop속성을 넣으면 아래 영상처럼 반복 재생됩니다.

 

loop 영상

 

<body> 
    <audio src="rollin.mp3" controls loop autoplay></audio>
</body>

위 코드에 autoplay속성을 추가하면 실행하자마자 자동으로 음악이 켜집니다. 

 

 

스마트인재개발원에서 진행된 수업입니다.

http://www.smhrd.or.kr

 

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

 

 

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

'HTML, CSS' 카테고리의 다른 글

[HTML] #8_1 입력 양식 태그 / form태그 속성 [광주인공지능학원]  (0) 2021.07.26
[HTML] #6 HTML 이미지 태그 [광주인공지능학원]  (0) 2021.07.12
[HTML] #5 HTML 테이블 태그 [광주인공지능학원]  (0) 2021.07.12
[HTML] #4 HTML 목록 태그 [스마트인재개발원]  (0) 2021.07.05
[HTML] #3_2 HTML 글자 태그 [스마트인재개발원]  (0) 2021.07.05
'HTML, CSS' Related Articles more