[media] HTML - <audio> 태그 ★ - 음성파일재생 (= audio태그 = 오디오태그)

목차

1. <audio> 예제 - 음성 파일 재생
2. <audio> 정의
3. <audio> 속성
4. <audio> 예제 - m4a 재생
5. <audio> 예제 - 크롬 미니 원형 플레이어
6. <audio> 예제 - 2개 오디오 재생 토글 버튼
7. <audio> 예제 - 1개 오디오 재생 토글 버튼

<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> 속성

<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>

 

결과보기