태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

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);
});

추천 목록

번호	제목
	HTML <Audio> 사용법
2,854	윈도우10 시스템파일 손상 (초간단 오류 복구방법!!)
2,853	PHP 파일 존재 여부 파악하기(로컬 파일 존재 및 원격지 파일 존재)
2,852	[CSS] 박스 세로 가운데 중앙 정렬 6가지
2,851	CSS Layout 수평 & 수직 정렬
2,850	여러 도메인들 간 쿠키 공유하기
2,849	태그 사이에 있는 텍스트를 추출
2,848	[JQuery] textbox focus on off일때 숫자 콤마 보여주기
2,847	쿠키 생성,가져오기,삭제
2,846	사용자 함수 모음
2,845	마우스,키보드 제한 ( 오른쪽클릭,드래그,영역선택등..)
2,844	[HTML5] <video> - DOM으로 제어하기
2,843	HTML5 video 태그에서 영상 좌우반전
2,842	PHP - 특정 태그 및 문자열 추출, 제거
2,841	[PHP] define과 defined의 차이
2,840	우클릭 완벽차단 스크립트
2,839	iframe 높이 100% 맞추기
2,838	curl 함수를 이용한 HTTP REFERER 변경
2,837	윈도우10 시스템 파일 및 Dism 검사
2,836	텍스트 줄바꿈, 글자자르기 CSS
2,835	jQuery Mobile에서 유용한 코드 10가지.
2,834	[PHP] dirname()함수와 $_SERVER 관련 상수들
2,833	[PHP] 파일 크기, 사이즈 불러오는 함수, filesize()
2,832	[jQuery] jQuery Quick API
2,831	[ transition ] 링크 hover 색상 변화 속도 조절
2,830	PHP 5.3.0 에서 사라진 함수들 대체
2,829	어떤 파일들이 include 나 require 되었는지 확인하는 함수(get_included_files)
2,828	PHP 날짜 형식 및 계산하기(날짜 더하고 빼기)
2,827	jQuery Mobile에서 유용한 코드 10가지.
2,826	값이 배열 안에 존재하는지 확인하는 in_array함수