HTML에서 오디오를 재생하는 방법 2가지를 정리한다.
1. HTML의 audio 태그를 이용하는 방법
2. Javascript의 audio객체를 이용하는 방법
참고로, 크롬 브라우저에서는 autoplay가 금지되어 자동재생이 불가하다.
1) HTML에서 <audio src-"xxx.mp3" autoplay></audio>코드는 자동 재생되지 않으며,
2) Javascript에서 사용자의 액션이 없는 상태에서의 audio객체.play() 코드도 작동하지 않는다.
상황에 따라 아래와 같은 로그가 뜰 수도 있다.
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
오디오 자동재생이 사용자 환경에 좋지 않다고 판단한 크롬의 정책이라는 것 같으니,
이 점에 주의하여 audio 사운드 재생을 다루어야 한다.
* 자세한 내용은 구글 정책 사이트 참고
1. HTML Audio 태그 사용법
1-1. 기본 사용법
audio 태그를 아래처럼작성하면 음악파일이 반복하여 자동 재생된다.(크롬은 사용자가 직접 play버튼을 눌러야 재생됨)
<audio src="sound.mp3" autoplay loop controls id="myAudio">오디오 지원되지 않는 브라우저</audio><실행 결과>
* audio태그가 지원되지 않는 브라우저의 경우, 태그 내부에 입력한 텍스트가 노출된다.
1-2. audio 태그의 속성(Attributes)
| 속성 | 값 | 설정 내용 |
| src | 음원파일 경로 | 재생할 음원 파일의 경로 설정(mp3, wav, ogg 파일 등) |
| autoplay | autoplay | 자동 재생 여부 설정(브라우저에 html파일이 로드되자마자 음악파일이 재생됨) |
| loop | loop | 반복 재생 여부 설정 |
| controls | controls | 컨트롤 패널(재생/정지 버튼 등) 노출 여부 설정 |
| muted | muted | 음소거 설정 |
* 그 외 preload 라는 속성도 있는데, 잘 사용은 안하는듯 하다.
1-3. 브라우저별 오디오 포맷 미지원 대응 처리
audio 태그 내부에 source 태그를 통해 다양한 타입의 오디오 포맷을 입력해주면, 브라우저가 알아서 지원하는 포맷으로 재생한다.
<audio autoplay loop controls>
<source src="sound.mp3" type="audio/mpeg">
<source src="sound.ogg" type="audio/ogg">
오디오가 지원되지 않는 브라우저입니다.
</audio>2. Javascript 사용법
: 자바스크립트 상에서 Audio 객체를 생성하여 재생/일시 정지 등을 컨트롤할 수 있다.
: 단, 크롬브라우저의 경우 사용자의 명시적인 액션(클릭 등)이 없는 상태에서의 음원 재생은 작동하지 않는다.
1-1. 객체 생성 및 리소스 로드
1) 자바스크립트 상에서 Audio 객체를 생성하고 음원파일 경로를 설정할 수 있다.
const myAudio = new Audio(); // Aduio 객체 생성
myAudio.src = "sound.mp3"; // 음원 파일 설정
myAudio.play(); // 음원 재생
myAudio.pause(); // 일시 정지
2) 만약 HTML 상에 audio태그를 선언해둔 상태라면, 엘리먼트 취득 방식으로 audio객체를 확보할 수 있다.
<!-- HTML audio 태그 -->
<audio src="sound.mp3" id="myAudio">오디오 지원되지 않는 브라우저</audio>
/* Javascrip 코드 */
const myAudio = document.getElementById("myAudio") // Audio객체 취득
myAudio.play(); // 음원 재생
myAudio.pause(); // 일시 정지* 두가지 방식 모두 결과는 동일하다.
2-2. Audio 객체의 메서드
: play()메서드로 재생하고, pause()로 일시 정지한다.
| 메서드 | 작동 내용 |
| play() | 재생 |
| pause() | 일시정지 |
| addTextTrack() | 새로운 트랙을 추가 |
| canPlayType() | 브라우저가 해당 오디오 타입을 재생할 수 있는지 체크 |
| load() | 오디오 객체를 리로드 |
2-3. Audio 객체의 프로퍼티
src로 음원파일 경로 설정, volume으로 볼륨 조정, loop으로 반복 설정한다.
| 프로퍼티 | 설정 내용 |
| src | 음원파일 경로 : "경로/파일명.확장자" |
| volume | 볼륨 : 0~1 |
| loop | 반복 여부: true | false |
| autoplay | 자동재생 여부: true | false |
| muted | 음소거 여부: true | false |
| paused | 일시정지 여부: true | false |
| ended | 재생완료 여부: true | false |
| duration | 음원의 전체 길이(초 단위) |
| currentTime | 음원의 현재 재생 위치(초 단위) |
이 외에도 다른 속성들이 많지만, 잘 사용은 안 하는듯 하다.
* 꿀팁: 오디오를 처음부터 다시 재생하려면, 일시정지후 currentTime을 0으로 설정하고 다시 재생하면 된다.(Stop 개념)
audio.pause(); // 일시 정지
audio.currentTime = 0; // 재생 위치를 처음으로 설정
audio.play(); // 처음부터 다시 재생됨
2-4. Audio 객체의 이벤트
주로 아래의 이벤트 정도를 많이 사용한다.
| 이벤트 | 상황 |
| canplaythrough | 음원 파일이 모드 로드되어 재생 가능할 때 |
| play | 재생이 시작될 때 |
| playing | 재생 중일 때 |
| puase | 일시 정지되었을 때 |
| ended | 재생이 완료되었을 때 |
| volumechange | 볼륨이 변경될 때 |
이 외에도 더 많은 이벤트가 있지만, 잘 사용하진 않는듯 하다.
# 주의 사항
크롬 브라우저는 사용자의 명시적인 액션이 없는 상태에서의 음원 재생을 허용하지 않는다.
따라서 아래와 같이 코드를 작성하면, 크롬에서 audio.play() 코드는 작동하지 않는다.(다른 브라우저는 작동함)
<!DOCTYPE html>
<html lang="ko">
<head>
</head>
<body>
</body>
<script>
// Audio 객체 설정
const myAudio = new Audio();
myAudio.src = "./sounds/bg.mp3";
// 오디오 재생: 크롬브라우저에서 작동 안함
myAudio.play();
</script>
</html>
따라서 아래와 같이 사용자의 클릭 등이 발생했을 때, 음원을 재생하도록 코딩해야 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
</head>
<body>
<!-- 버튼 태그 생성 -->
<button id="btnPlay">재생 버튼</button>
<button id="btnPause">일시정지 버튼</button>
<button id="btnStop">정지 버튼</button>
</body>
<script>
// Audio 객체 설정
const myAudio = new Audio();
myAudio.src = "./sounds/bg.mp3";
// 오디오 재생: 크롬브라우저에서 작동 안함
myAudio.play();
// 버튼 취득
const btnPlay = document.getElementById("btnPlay");
const btnPause = document.getElementById("btnPause");
const btnStop = document.getElementById("btnStop");
// 재생 버튼
btnPlay.onclick = function () {
myAudio.play();
}
// 일시정지 버튼
btnPause.onclick = function () {
myAudio.pause();
}
// 정지 버튼
btnStop.onclick = function () {
myAudio.pause();
myAudio.currentTime = 0; // 재생시간을 처음으로 설정
}
</script>
</html>* 정지 기능을 구현하기 위해 currentTime 속성의 값을 0으로 설정했다.
* 크롬의 오디오 정책에 대한 자세한 내용은 구글 정책 사이트 참고
Audio 객체의 더 많은 속성은 이 사이트를 참고하자.
※ 참고: Web Audio API에 대하여
자바스크립트는 Audio객체를 통한 단순 음원 재생뿐만 아니라,
Web Audio API를 통해 더욱 심화된 사운드 제어 기능을 제공한다.
이에 대해서는 아래 글을 참고하자.
[자바스크립트] Web Audio API 기본 원리와 예제 코드
'개발(Development) > JS(자바스크립트)' 카테고리의 다른 글
| Javascript: Audio 사운드 하나를 연속하여 반복/중복 재생하는 방법 (0) | 2021.06.22 |
|---|---|
| JS: DOM 이벤트 리스너로 객체의 메소드 연결 시, this가 변경되는 문제 (0) | 2021.06.21 |
| [자바스크립트] setInterval/clearInterval 반복 중단, 재시작(재개) 방법 (0) | 2021.06.03 |
| VS CODE: JS 함수 주석 문서화하는 방법(자동완성 툴팁 노출) (0) | 2021.05.09 |
| [자바스크립트] 코드 실행 2단계와 변수/함수 생성 과정 (0) | 2021.04.08 |
댓글