목차
- <audio> 예제 - 음성 파일 재생
- <audio> 정의
- <audio> 속성
- <audio> 예제 - m4a 재생
- <audio> 예제 - 크롬 미니 원형 플레이어
- <audio> 예제 - 2개 오디오 재생 토글 버튼
- <audio> 예제 - 1개 오디오 재생 토글 버튼
<audio> 예제 - 음성 파일 재생
<audio controls>
<
source src="voice.mp3" type="audio/
mpeg">
<source src="voice.ogg" type="audio/ogg">
<source src="voice.wav" type="audio/wav">
댁 브라우저가 후져서, audio 태그 지원 안 함. ㅡㅡ;
</audio>
<audio> 정의
음성 콘텐츠 재생. (현재, MP3. OGG, WAV 형식만 지원)
1.
- <audio> 태그 내에 <source> 태그를 사용해, mp3 ogg wav 음성 파일을 불러 옴.
- <audio> 태그 사이의 텍스트 문자는 <audio> 태그 지원 않는 브라우저에서만 보여짐. (보통, audio 태그 지원 여부 및 해당 오디오 다운 링크 표시)
2. 파일 형식별 브라우저 지원 현황.
- MP3 : IE9+, 최신 주요 브라우저 모두 지원 (※ IE8 이하 지원 X)
- OGG : 크롬, 파이어폭스,오페라 지원. (※ IE, Safari : 지원 X)
- WAV : 주요 최신 브라우저 모두 지원. (※ IE : 지원 X)
3. 파일 형식별 MIME 타입
- MP3 : audio/mpeg ※ audio/mp3 아님에 주의
- OGG : audio/ogg
- WAV : audio/wav
4.
- JS로 오디오플레이어 만들지 않는 이상, 오디오 스타일 지정 불가.
- HTML5에서 새로 도입
- 주요 브라우저 기본 CSS : none
5. 크롬 자동 재생 정책
https://developer.chrome.com/blog/autoplay/
PS.
- MIME (마임: Multipurpose Internet Mail Extensions) - 아스키 데이터가 아닌 메시지를 인터넷 통해 전송 가능한 프로토콜.
- ASCII (아스키: American Standard Code for Information Interchange) - 정보 교환용 표준 코드.
- 구글 검색 키워드: Web Audio API
<audio> 속성
| 속성 |
속성값 |
설명 |
비고 |
| autoplay |
autoplay |
자동 재생 |
HTML5 추가 |
| controls |
controls |
재생 멈춤 등 오디오 통제 툴 |
HTML5 추가 |
| loop |
loop |
반복 재생 |
HTML5 추가 |
| muted |
muted |
소리 죽임 |
HTML5 추가 |
| preload |
auto
metadata
none |
auto : 페이지 로딩 시, 음성 파일 전체 로딩
metadata : 페이지 로딩 시, 메타데이터만 로딩
none : 페이지 로딩 시, 음성 파일 로딩 안 함. |
HTML5 추가 |
| src |
URL 주소 |
재생할 음성 파일 URL 주소 |
HTML5 추가 |
※ 메타데이터 (= 속성정보 metadata) : 실제 데이터를 효율적으로 관리하는데 필요한 직간접 데이터.
<audio> 예제 - m4a 재생
<audio id="audio" autoplay loop>
<source src="https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.m4a" type="audio/mp4"/>
</audio>
결과보기
<audio> 예제 - 크롬 미니 원형 플레이어
<style>
#hz {width:30px;height:30px;overflow:hidden;border-radius:50%; border:1px solid #cccccc;box-sizing:content-box;}
#hz audio {margin-top:-12px;margin-left:-11px;display:block}
</style>
<div id="hz">
<audio src="https://ccrma.stanford.edu/~jos/mp3/harpsi-cs.mp3" controls loop autoplay></audio>
</div>
비타주리 님 (220614) https://sir.kr/g5_tip/18690
<audio> 예제 - 2개 오디오 재생 토글 버튼
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
function toggle_play() {
var hz1 = document.getElementById('hz1');
var hz2 = document.getElementById('hz2');
if (hz1.paused == true) {
hz2.pause();
hz2.currentTime = 0;
hz1.play();
} else {
hz1.pause();
hz1.currentTime = 0;
hz2.play();
}
}
$(function () {
$("#btn_sentence").on("click", function() {
toggle_play();
});
});
</script>
<audio src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" controls id="hz1"></audio>
<audio src="https://ccrma.stanford.edu/~jos/mp3/harpsi-cs.mp3" controls id="hz2"></audio>
<button type="button" id="btn">재생 토글</button>
결과보기
배르만 님 (230410) https://sir.kr/qa/496227
PS. 순수 JavaScript 방식 보기
<audio> 예제 - 1개 오디오 재생 토글 버튼
https://github.com/daviddarnes/play-button
<style>
play-button:defined audio,
play-button:not(:defined) button {
display: none;
}
</style>
<script type="module" src="https://daviddarnes.github.io/play-button/play-button.js"></script>
<play-button>
<audio controls src="https://ccrma.stanford.edu/~jos/mp3/harpsi-cs.mp3"></audio>
<button>Play</button>
</play-button>
결과보기
