1. autoplay: 자동재생. 크롬, 엣지 등 지원 안 되는 브라우저가 있음. 파이어폭시 지원됨. 2. controls: 화면에 컨트롤 할 수 있는 막대를 표시함. 재생, 멈춤, 진행바, 볼륨, 진행속도 등을 표시 3. loop: 반복 재생 4. muted: 음소거 기능. 5. preload: 페이지가 브라우저에 로드될 때 오디오 파일이 같이 로드되어야 하는지 여부와 그 방법을 명시함. preload="metadata"등으로 명시함. autoplay속성이 preload속성보다 우선순위가 높다. 즉, autoplay속성이 정의되어 있으면 preload속성은 무시된다. - auto: 페이지가 로드될 때 브라우저가 오디오 파일을 같이 로드함. - metadata(디폴트 권장): 페이지가 로드될 때 브라우저가 메타데이터(metadata)만 로드함. - none: 페이지가 로드될 때 브라우저가 오디오 파일을 로드하지 않음. (이 경우에는 영상의 썸네일이 뜨지 않는다.)
<audio
src="../../img/bgsound.mp3"
title="비에 어울리는 피아노 경음악"
controls
loop
muted
autoplay
></audio>
브라우저마다 컨트롤창이 다르다.
audio
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>오디오 재생하기</title>
<style>
.top {
position: relative;
width: 500px;
height: 500px;
background: url(https://cdn.dailycc.net/news/thumbnail/202312/764587_669135_3615_v150.jpg) no-repeat top left;
/* background: url(../../img/bg2.jpg) no-repeat top left; */
background-size: cover;
/* cover : 전체 컨테이너를 덮도록 배경 이미지 크기를 조정하는 속성값 */
}
audio {
width: 500px;
height: 30px;
position: absolute;
bottom: 0px;
left: 0px;
}
</style>
</head>
<body>
<d1
><dt>audio속성들</dt>
<dd>
1. autoplay: 자동재생. 크롬, 엣지 등 지원 안 되는 브라우저가 있음.
파이어폭시 지원됨.
</dd>
<dd>
2. controls: 화면에 컨트롤 할 수 있는 막대를 표시함. 재생, 멈춤, 진행바,
볼륨, 진행속도 등을 표시
</dd>
<dd>3. loop: 반복 재생</dd>
<dd>4. muted: 음소거 기능.</dd>
<dd>
5. preload: 페이지가 브라우저에 로드될 때 오디오 파일이 같이 로드되어야
하는지 여부와 그 방법을 명시함.
</dd>
<dd>preload="metadata"등으로 명시함.</dd>
<dd>
autoplay속성이 preload속성보다 우선순위가 높다. 즉 autoplay속성이
정의되어 있으면 preload속성은 무시된다.
</dd>
<dd>- auto: 페이지가 로드될 때 브라우저가 오디오 파일을 같이 로드함.</dd>
<dd>
- metadata(디폴트 권장): 페이지가 로드될 때 브라우저가
메타데이터(metadata)만 로드함.
</dd>
<dd>
- none: 페이지가 로드될 때 브라우저가 오디오 파일을 로드하지 않음. (이
경우에는 영상의 썸네일이 뜨지 않는다.)
</dd>
</d1>
<div class="top">
<audio
src="../../img/bgsound.mp3"
title="비에 어울리는 피아노 경음악"
controls
loop
muted
autoplay
></audio>
</div>
</body>
</html>
