✨ HTML | <audio><audio/> 웹페이지에 배경음악 추가하기

 

 

기본 문법 

<audio controls>
  <source src="./bgm/arne.mp3" type="audio/mpeg"/>
</audio>

 

 

 

그럼 이렇게 음악 재생 컨트롤러가 생긴다. 

 

 

 

 

 속성들 

- autoplay: 웹페이지에 접속하면 자동으로 음악이 재생된다. 

<audio controls autoplay>
        <source src="./bgm/arne.mp3" type="audio/mpeg"/>
</audio>

 

*대신 크롬 브라우저는 자동 재생을 허용하지 않는다. muted 속성을 함께 사용해줄 때만 허용. 

 

 

- controls : 재생, 멈춤 버튼 설정할 수 있다. 

 

- loop : 음악이 끝난 후에 다시 반복할 지 설정. 

 

- muted : 음소거한 상태가 기본 값으로 돼 있다. 

<audio controls muted>
        <source src="./bgm/arne.mp3" type="audio/mpeg"/>
</audio>

 

 

- preload : auto, metadata, none 으로 설정할 수 있다. 페이지가 로드될 때 음악을 같이 로드할 지 그 여부를 설정. 

- src : 음악 파일의 url을 적는다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

코딩교육 티씨피스쿨

 

W3Schools.com