STUDY/Javascript
[HTML/Javascript] 오디오 재생
_JJ_
2023. 4. 14. 15:06
오디오 쓸 일이 잘 없어서 못써보고 있다가 강의에서 배경음악을 넣어볼 일이 생겨서
오디오 재생하는 방법 2가지를 정리해 본다.
1. HTML audio 태그
1-1. 기본 사용법
<audio src="./sound/bg.mp3" loop controls>오디오 지원되지 않을 시 나타나는 텍스트</audio>
1-2. audio 태그 속성
| 속성 | 값 | 설정 내용 |
| src | 음원파일 경로 | 재생할 음원 파일의 경로 설정(mp3, wav, ogg 파일 등) |
| autoplay | autoplay | 자동 재생 여부 설정(브라우저에 html파일이 로드되자마자 음악파일이 재생됨) |
| loop | loop | 반복 재생 여부 설정 |
| controls | controls | 컨트롤 패널(재생/정지 버튼 등) 노출 여부 설정 |
| muted | muted | 음소거 설정 |
크롬 브라우저에서는 autoplay가 금지되어 자동재생이 불가하다.
1-3. 브라우저별 오디오 포맷 미지원 대응 처리
audio 태그 내부에 source 태그를 통해 다양한 타입의 오디오 포맷을 입력해 주면 브라우저가 알아서 지원하는 포맷으로 재생한다
<audio loop controls>
<source src="./sound/bg.mp3" type="audio/mpeg">
<source src="./sound/bg.mp3" type="audio/ogg">
</audio>
2. Javascript
2-1. 객체 생성
1) HTML 상에 audio 태그를 선언한 상태라면 엘리먼트 취득 방식으로 확보할 수 있다.
<audio src="./sound/bg.mp3" id="myAudio">오디오 지원되지 않을 시 나타나는 텍스트</audio>
const myAudio = document.querySelector('#myAudio');
myAudio.play();
myAudio.pause();
2) 자바스크립트 상에서 Audio 객체를 생성하고 파일경로를 설정할 수 있다.
const myAudio = new Audio();
myAudio.src = './sound/bg.mp3';
myAudio.play();
myAudio.pause();
2-2. Audio 객체의 메서드
| 메서드 | 작동 내용 |
| play() | 재생 |
| pause() | 일시정지 |
| addTextTrack() | 새로운 트랙 추가 |
| canPlayType() | 브라우저가 해당 오디오 타입을 재생할 수 있는지 체크 |
| load() | 오디오 객체를 리로드 |
2-3. Audio 객체의 프로퍼티
| 프로퍼티 | 내용 |
| volume | 볼륨: 0~1 |
| loop | 반복 여부: true | false |
| autoplay | 자동재생 여부: true | false |
2-4. Audio 객체의 이벤트
| 이벤트 | 상황 |
| play | 재생이 시작될 때 |
| pause | 일시 정지 되었을 때 |
| ended | 재생이 완료되었을 때 |
ex)
<button type="button" id="play">Audio play</button>
const play = document.querySelector("#play");
play.addEventListener("click", () => {
myAudio.autoplay = true;
myAudio.play();
});
더 많은 정보: https://www.w3schools.com/tags/ref_av_dom.asp
reference
https://developer.mozilla.org/ko/docs/Web/HTML/Element/audio