[HTML] audio 태그 사용

Audio 태그 사용법

<audio src="오디오 파일 경로"></audio>

Audio 태그에서 사용할 수 있는 파일

• mp3
• wav
• ogg

Audio 태그에서 사용할 수 있는 속성

• controls : 웹 화면에 컨트롤 막대를 표시. 컨트롤 막대에는 재생, 멈춤, 진행바, 볼륭 등이 있음.

<audio src="https://ccrma.stanford.edu/~jos/mp3/harpsi-cs.mp3" controls></audio>

• autoplay : 오디오를 자동 재생

<audio src="https://ccrma.stanford.edu/~jos/mp3/harpsi-cs.mp3" controls autoplay></audio>

• loop : 반복 재생

<audio src="https://ccrma.stanford.edu/~jos/mp3/harpsi-cs.mp3" controls loop></audio>

• muted : 재생하지만 음소거

<audio src="https://ccrma.stanford.edu/~jos/mp3/harpsi-cs.mp3" controls muted></audio>

• preload : 재생 버튼을 눌러 재생하기 전에 오디오 파일을 다운로드해서 준비

<audio src="https://ccrma.stanford.edu/~jos/mp3/harpsi-cs.mp3" controls preload></audio>

 

Source 태그 사용법 (여러개의 오디오 파일 형식 지정)

<audio controls>
    <source src="오디오 파일 경로" type="audio/ogg">
    <source src="오디오 파일 경로" type="audio/mpeg">
    audio 오류 시 대체 텍스트
</audio>

• src : 미디어 파일의 경로를 지정.
• type : 웹 브라우저가 해당 오디오 파일을 재생할 수 있는지 확인하도록 오디오 파일의 유형을 알려줍니다.
  
  • type을 지정하지 않으면 웹 브라우저가 재생이 가능한 파일인지 확인하므로 트래픽이 낭비됨.
    따라서 type 속성은 꼭 지정하자. 

 

 

 

출처: https://coding-factory.tistory.com/885