HTML 오디오 태그 (Audio, iframe) 음악 자동재생

HTML 5부터 제공해주고 있는 오디오 태그가 있습니다. 오디오 태그를 이용해서 원하는 음악을 html에 넣을 수 있습니다.

그리고, audio 태그 말고 iframe 태그로도 음악을 넣을 수 있습니다.

 

아래에서는 <audio> 태그와 <iframe>태그를 살펴봅니다.

 

 

<audio> 태그

사용방법은 간단합니다. <audio></audio> 태그 안에 <source>태그를 이용해서 원하는 음악파일을 가져오면 됩니다.

<source>태그에는 src라는 속성이 존재하고, 값으로 음악파일의 경로(path)를 넣어주면 됩니다. 

<h3>The Weeknd - I Feel It Coming ( cover by <b>J.Fla</b> )</h3>
<p>audio 태그를 이용한 audio 재생 - autoplay</p>
<audio autoplay controls>
    <source src="audio/The_Weeknd-I_Feel_It_Coming(cover_byJ.Fla).mp3" type="audio/mp3">
</audio>

 

 

참고로 웹 브라우저를 실행했을 때, 자동으로 음악이 나오게 하고 싶다면, autoplay속성을 넣어주면 됩니다. 그리고, controls 속성을 넣으면 음악을 멈추고 재생하고 컨트롤할 수 있는 UI가 화면에 보이게 됩니다.

 

태그의 속성 정리

autoplay: 자동 재생

• 예제: <audio autoplay> ...생략...

controls: 음악 플레이어 UI 화면에 표시

• 예제: <audio controls > ...생략...

loop: 무한 반복

• 예제: <audio loop > ...생략...

 

<iframe> 태그

iframe을 이용하는 방법도 있는데, 위에서는 언급하지 않았지만 autoplay를 넣었을 때, 브라우저나 환경에 따라 자동으로 음악이 재생되지 않는 경우도 있습니다. 이때, iframe 태그를 이용하면 간단하게 해결 할 수 있습니다.

<p>iframe을 이용한 audio 재생 - autoplay</p>
<iframe src="audio/The_Weeknd-I_Feel_It_Coming(cover_byJ.Fla).mp3" allow="autoplay" id="audio"></iframe>

 

사용하는 방법도 audio와 매우 흡사하여 쉽게 사용할 수 있습니다. 그리고, 자동재생을 하려면 allow="autoplay" 속성을 넣어줘야 합니다.

 

예제 확인 사이트
https://taehongdev.github.io/html_css_study/exam03/exam03_05.html

3장 예제5

 

 

 

다른 글

2019/03/15 - [WEB/HTML&CSS] - HTML에서 리스트 사용방법(ol, ul, li)

HTML에서 리스트 사용방법(ol, ul, li)

2019/03/16 - [WEB/HTML&CSS] - HTML 테이블 사용방법 (table)

HTML 테이블 사용방법 (table)

2019/03/17 - [WEB/HTML&CSS] - HTML에서 이미지 가져오기 (img 태그)

HTML에서 이미지 가져오기 (img 태그)