태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

HTML <Audio> 사용법

2년 전

자바스크립트 상에서 Audio 객체를 생성하여 재생/일시 정지 등을 컨트롤할 수 있다.
단, 크롬브라우저의 경우 사용자의 명시적인 액션(클릭 등)이 없는 상태에서의 음원 재생은 작동하지 않는다.

객체 생성
var audio = new Audio('audio_file.mp3');
audio.play();

만약 HTML 상에 audio태그를 선언해둔 상태라면, 엘리먼트 취득 방식으로 audio객체를 확보할 수 있다.


<audio src="sound.mp3" id="myAudio"></audio>

/* Javascrip 코드 */
const myAudio = document.getElementById("myAudio") // Audio객체 취득
myAudio.play(); // 음원 재생
myAudio.pause(); // 일시 정지

Audio 객체 메서드

play() 재생
pause() 일시정지
addTextTrack() 새로운 트랙을 추가
canPlayType() 브라우저가 해당 오디오 타입을 재생할 수 있는지 체크
load() 오디오 객체를 리로드

Audio 객체 프로퍼티

src 음원파일 경로 : "경로/파일명.확장자"
volume 볼륨 : 0~1
loop 반복 여부: true | false
autoplay 자동재생 여부: true | false
muted 음소거 여부: true | false
paused 일시정지 여부: true | false
ended 재생완료 여부: true | false
duration 음원의 전체 길이(초 단위)
currentTime 음원의 현재 재생 위치(초 단위)
/* 오디오 처음부터 재생 */
audio.currentTime = 0; // 재생 위치를 처음으로 설정
audio.play(); // 처음부터 다시 재생됨

Audio 객체 이벤트

canplaythrough 음원 파일이 모드 로드되어 재생 가능할 때
play 재생이 시작될 때
playing 재생 중일 때
puase 일시 정지되었을 때
ended 재생이 완료되었을 때
volumechange 볼륨이 변경될 때

샘플 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Audio 객체</title>
</head>
<body>
<button class="btn1">play sound1</button>
<button class="btn2">play sound2</button>
<script src="index.js"></script>
</body>
</html>

// btn1을 눌렀을 때 sound1.mp3 재생
document.querySelector(".btn1").addEventListener("click", function () {
var audio1 = new Audio("sound1.mp3");
audio1.loop = false; // 반복재생하지 않음
audio1.volume = 0.5; // 음량 설정
audio1.play(); // sound1.mp3 재생
});

// btn2를 눌렀을 때 sound2.mp3 재생
document.querySelector(".btn2").addEventListener("click", function () {
var audio2 = new Audio("sound2.mp3");
audio2.loop = true; // 반복재생하지 않음
audio2.volume = 0.5; // 음량 설정
audio2.play(); // sound2.mp3 재생
setTimeout(function () { // 1초 후 sound2.mp3 일시정지
audio2.pause();
}, 1000);
});

추천 목록

번호	제목
110	Stream an audio file with MediaPlayer 오디오 파일 스트리밍 하기
109	Audio Streaming PHP Code
108	Vimeo (비메오) API 를 사용하여 플레이어 컨트롤하기
	HTML <Audio> 사용법
106	[HTML5] Video & Audio
105	HTML5 오디오 곡 목록 재생
104	HTML5 오디오 404 오류시 다른 파일 재생
103	HTML5 오디오 이벤트리스너 onerror
102	JavaScript Audio 객체
101	HTML5 Audio 2채널 재생
100	HTML5 Audio 2채널 재생 + 재생완료 리스너
99	HTML5 음악 볼륨 조절
98	HTML5 음악 볼륨 조절
97	HTML5 오디오 자동재생
96	HTML5 오디오 반복 재생
95	HTML5 오디오 이벤트리스너
94	HTML5 Video/Audio CurrentTime/Ended 문제점
93	audio 엘리먼트의 onplay 이벤트 처리 시 주의사항
92	Windows Media Player 제어
91	미디어 플레이 및 버퍼링 체크
90	미디어플레이어 재생 시간 추출
89	미디어 플레이어 객체 제어하기
88	미디어 파일 재상/멈춤/소리/음소거/반복재생 등
87	미디어 플레이어 제어하기 1~4
86	미디어 플레이어의 상태
85	미디어 플레이 및 버퍼링 체크
84	event - volume bar
83	미디어 플레이어7.0 객체제어 속성
82	자바스크립트로 스크롤바를 제외한 사운드 재생,일시정시,정지, 볼륨제어
81	원하는 시간부터 재생