[Html] 멀티미디어 오디오 - 반복, 음소거

오디오(audio)

• HTML5 이전에는 웹 페이지에서 오디오를 삽입하기 위해서는 플래시(flash) 같은 외부 플러그인에 의존해야 했지만 HTML5에서는 <audio>태그를 이용한 표준화된 방식을 제공한다.
• HTML5 표준이 공식적으로 지원하는 오디오 파일 형식은 MP3, WAV, Ogg 뿐이다.

<audio src="음악파일경로" controls></audio>

HTML5 audio 요소

1. <audio> : 오디오와 음악 등 오디오 파일을 명시한다. <audio>태그 사이에 존재하는 텍스트는 해당 웹 브라우저가 <audio>태그를 지원하지 않을 때만 화면에 표시된다.
2. <source> : 파일 형식에 따라 재생되지 않는 브라우저가 존재하지만 source 태그를 사용하여 파일 형식의 차이 문제를 해결 할 수 있다. audio 요소의 원본 파일에 대한 파일 형식 및 파일 주소를 여러 개 명시하며, source 태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소를 사용한다.

<audio controls>
<!-- audio controls autoplay -->
<!-- audio controls loop -->
    <source src="assets/audio/Kalimba.mp3" type="audio/mpeg">
    <source src="assets/audio/Kalimba.ogg" type="audio/ogg">
    이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타납니다!
</audio>

HTML5 audio 속성

• controls 속성으로 재생, 정지 및 소리의 조절 등 오디오의 기본적인 동작을 조절할 수 있는 패널을 생성한다.
• autoplay 속성은 웹 페이지가 로드될 때 오디오를 자동으로 재생시켜 줄지 않을지를 설정하며, muted 속성은 초기에 음소거 상태로 시작하며, loop 속성으로 설정하면 오디오의 재생이 끝나도 계속적으로 반복해서 오디오를 재생한다.
• preload 속성은 오디오를 재생하기 전에 파일의 내용을 미리 다운받을지를 명시한다.

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/