예전 싸이월드나 홈페이지가면 그 홈페이지에서 음악이 나오는걸 경험 한적이있습니다.
저희는 그 음악이나 음성 오디오 파일을 넣을 수있는 태그를 알아보겠습니다.
<audio> </audio> 태그를 알아보겠습니다.
오디오 태그안에는 소스라는 태그가 하나 더들어가야 합니다.
소스태그는 오디오나 미디어 파일을 넣을 때 사용됩니다.
<source src="주소"> 소스 태그는 src로 그 파일에 주소를 가리 키고 있어야 사용가능합니다.
그럼 이제 html 파일을 저장 하는 파일에 .mp3 파일을 넣어 줍니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
<h1> HTML 기초배우기 </h1>
<audio controls>
<source src="Beat Your Competition - Vibe Tracks.mp3" type="audio/mp3">
</audio>
</body>
</html>
controls 는 비디오 재생 타입을 말해 줍니다.
<audio controls autoplay>
<source src="Beat Your Competition - Vibe Tracks.mp3" type="audio/mp3">
</audio>
이렇게 controls autoplay를 작성을 하면 페이지가 열리면 자동으로 재생이 됩니다.
<audio controls loop>
<source src="Beat Your Competition - Vibe Tracks.mp3" type="audio/mp3">
</audio>loop를 넣어주면 음악이 끝나면 다시 재생을 시작합니다.
그리고 type은 음악 재생파일의 타입을 작성하여야 합니다 .
오디오 파일이 mp3면 mp3를 기재 하고 wav 파일이면 wav로 바꿔 작성해주어야합니다.
결과 화면은 이렇게 나옵니다.
Beat Your Competition - Vibe Tracks.mp3
6.63MB
이렇게 오디오 파일을 재생할수있게 디자인이 나왔습니다.
오디오파일은 저작권이 없으므로 이블로그에서 가져다 쓰셔도 됩니다.
감사합니다.
'개발 > HTML' 카테고리의 다른 글
| HTML (입력) 기초 6편 (0) | 2021.04.14 |
|---|---|
| HTML (박스 모델) 기초 5-2편 (0) | 2021.04.12 |
| HTML (박스 모델) 기초 5-1편 (0) | 2021.04.11 |
| HTML (리스트 ) 기초 3편 (0) | 2021.04.10 |
| HTML (밑줄, 기울기, 줄바꿈, 굵기)기초 2편 (0) | 2021.04.09 |