audio
HTML5에서 배경 음악이나 효과음 등 오디오를 삽입할 때는
<audio> 태그를 사용합니다. 이때 대부분의 브라우저에서 mp3
파일을 지원하기 때문에 mp3 파일을 사용하는 것이 좋습니다.
기본형
<audio autoplay controls loop muted preload="xxx">
<source src="xxx" type="xxx">
이 문장은 사용자의 웹 브라우저가 audio 태그를 지원하지 않을 때 나타납니다!
</audio>
autoplay: 오디오를 자동 재생합니다.-
controls: 재생, 정지, 볼륨, 진행바 등 컨트롤 막대를 표시합니다. loop: 오디오를 반복 재생합니다.muted: 오디오를 음소거합니다.-
preload: 오디오를 재생하기 전에 파일의 내용을 미리 다운로드하여 불러올지를 정합니다. -
source- src : 경로를 입력합니다. 웹브라우저가 가장 많이 지원하는 형식은 MP3입니다.
- type : 타입을 입력합니다. 만약 MP3 파일이라면 audio/mp3라고 적습니다.
예제
- mp3 오디오를 HTML에 삽입합니다.
- 페이지 로드되면 오디오가 자동 재생되고, 반복하여 재생됩니다.
- 크기, 배치 등은 CSS를 이용하는 것이 좋습니다.
<audio controls>
<source src="//bit.ly/3euuS7B" type="audio/mpeg">
</audio>
<audio controls muted>
<source src="//bit.ly/3euuS7B" type="audio/mpeg">
</audio>
<audio controls loop>
<source src="//bit.ly/3euuS7B" type="audio/mpeg">
</audio>
<audio controls loop muted>
<source src="//bit.ly/3euuS7B" type="audio/mpeg">
</audio>
audio {
display: block;
margin: 20px auto;
}
브라우저 정책이 변경되어 자동재생 autoplay 속성은 무분별한 광고 및 스팸의 이유로 차단되었습니다. 버튼을 누르거나, 브라우저 설정에서 자동재생 속성을 변경하는 것과 같이 사용자가 재생 의사를 밝히는 특정 행동을 한다면 오디오를 재생할 수 있습니다.
오디오 도구
구글 드라이브로 오디오 링크 만들기