배경음악 다는 방법(티스토리 배경음악, 자동재생, Audio 태그)

HTML5 부터 Audio 태그를 지원하면서 아주 간단하게 글에 배경음악을 설치하는 방법이 있습니다. 구글 크롬 정책에 의하여 자동재생이 일부 막혔지만, 다른 방법으로 구현할 수 있습니다. 아래의 경우에는 일반적인 경우로 배경음악을 설치하는 방법이므로, 사이트 자체에 배경음악을 설치하기 위해서는 인덱스페이지에 Div 태그로 감싸 요소를 가려주시면 됩니다.

<audio autoplay="autoplay" loop="loop" controls="controls">
<source src="music.mp3" type="audio/mp3">
  </audio>

<audio autoplay loop controls>

글에 배경음악을 다는 방법입니다. 일반적으로 티스토리 기준으로 설명을 하면 HTML 지원이 가능한 사이트 혹은 블로그에서 위의 태그로 오디오 태그를 활용할 수 있습니다.

<audio> 태그에 각 속성을 추가하면 여러가지를 구현할 수 있습니다. 일반적으로 <audio autoplay>와 같은 방식으로 태그를 작성합니다.
<audio autoplay>
<audio loop>
<audio controls>
.
.
<audio autoplay loop controls> 와 같은 식으로 구현하고 음악 소스파일 주소를 <source src="url">와 같이 적용하면 오디오 태그를 사용할 수 있습니다.

Controls 속성의 경우에는 아래의 이미지처럼 음악을 일시정지 혹은 재생하거나 음량을 줄이고, 파일을 다운로드 하는 깔끔한 디자인으로 기능이 구현됩니다.

 

 

음악파일의 확장자에 따라서 지원하지 않을 경우 type 태그를 활용할 수 있습니다. 일반적으로 <type="audio/mp3">와 같은 방식으로 구현합니다. 이제부터는 HTML5 가 적용된 곳에서 매우 쉬운 방법으로 음악파일을 재생할 수 있는 요소를 쉽게 추가할 수 있습니다.