4-4. Audio 객체

Audio 객체

오디오를 재생하기 위해 사용되는 요소

MP3, WAV, OGG 등 다양한 오디오 포맷 파일을 재생할 수 있음ㅈ

자바스크립트 상에서  audio객체를 생성하거나 혹은 HTML상에 <audio>태그를 선언해둔 상태라면 엘리먼트 취득 방식으로 audio 객체 확보할 수도 있다.

 

const audio = new Audio('audio.mp3'); // 'audio.mp3' 파일을 로딩
audio.play(); // 오디오 재생

 

이러한 Audio 객체는 다양한 메서드와 이벤트를 제공하므로, 다양한 오디오 제어 기능을 구현할 수 있다.

 

Audio 객체 프로퍼티

src - 음원 파일 경로  : "경로/파일명. 확장자"

volumn - 볼륨 : 0.0 ~ 1.0

loop - 반복 여부 : true | false

autoplay - 자동 재생 여부 : true | false

muted - 음소거 여부 : true | false

paused - 일시 정지 여부 : true | false

ended - 재생 완료 여부 : true | false

duration - 음원 전체 길이 (초 단위)

currentTime - 음원 현재 재생 위치(초 단위)

 

Audio 객체 메서드

play() - 재생

pause() - 일시 정지

addTextTrack() - 새로운 트랙을 추가

canPlayType() - 브라우저가 해당 오디오 타입을 재생할 수 있는지 체크

load() - 오디오 객체를 리로드

 

const audio = new Audio('audio.mp3');

audio.loop = true; // 반복재생하지않음
audio.volume = 0.5; // 음량 설정

audio.play(); // audio.mp3 재생

setTimeout(function() { // 5초 후 audio.mp3 일시정지
	audio.pause();
}, 5000);

// audio를 다시 load함. 주로 audio의 src나 설정이 바뀌었을 경우에 사용
audio.src = "audio.mp3";
audio.load();

// audio 처음부터 재생
audio.currentTime = 0; // 재생 위치를 처음으로 설정
audio.play(); // 처음부터 다시 재생됨

 

Audio 객체 이벤트

오디오가 재생되거나 일시정지될 때 발생하는 이벤트 등을 처리할 수 있다.

 

canplaythrough - 음원 파일이 모두 로드되어 재생 가능할 때

play - 재생이 시작될 때

playing - 재생 중일 때

pause - 일시 정지되었을 때

ended - 재생이 완료되었을 때

volumnchange - 볼륨이 변경될 때

 

// 오디오 재생 시
audio.addEventListener('play', function() {
	console.log('오디오가 재생되었습니다.');
});

// 오디오 일시정지 시
audio.addEventListener('pause', function() {
	console.log('오디오가 일시정지되었습니다.');
});

// 오디오 재생 완료 시(끝났을 시)
audio.addEventListener('ended', function() {
	console.log('오디오가 끝났습니다.');
});

---

음원 자동 재생 브라우저 정책

크롬이나 사파리, 파이어폭스 같은 대부분 브라우저의 경우 보안 정책 상 사용자의 명시적인 액션(클릭 등)이 없는 상태에서의 자동 음원 재생과 같은 기능은 작동하지 않는다.

 

예를 들어 아래와 같이 자바스크립트로 오디오 객체를 로드하고 자동으로 play() 메서드를 통해 음원 재생하도록 설정했지만 브라우저 상에서 이를 차단한다는 것이다.

const audio = new Audio('audio.mp3');
audio.play();

 

즉, 사용자가 버튼 클릭과 같은 작업을 통해 play() 메서드를 호출해야만 음원을 재생할 수 있다는 것이다. 따라서 아래와 같이 코드를 구성해야한다.

<button id="play-btn">음악 재생</button>

<script>
	const audio = new Audio('audio.mp3');
    const playBtn = document.getElementById('play-btn');
    
    playBtn.addEventListener('click', function(){
    	audio.play();
    });
 </script>

이전에는, Chrome 브라우저에서 자바스크립트를 이용하여 음원을 자동으로 재생하는 것이 가능했지만, 이는 악성코드이 유포나 사용자의 개인정보를 탈취하는 등의 보안 위협이 될 수 있었기 때문이다.

 

[참고]https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9D%8C%EC%95%85-%EA%B0%9D%EC%B2%B4Audio-%EB%8B%A4%EB%A3%A8%EA%B8%B0