자바스크립트 오디오 파일 실행하기 (JavaScript mp3, wav 등등)

자바스크립트로 웹 개발을 하다 보면 웹 상에서 오디오 파일을 실행하도록 세팅하는 경우가 있습니다.

배경음악이라던지, 버튼을 클릭했을 때 소리, 혹은 원하는 순간에 소리가 나도록 설정하기 위해 사용합니다.

 

자바스크립트에서 오디오 사용하는 방법을 알아보도록 하겠습니다.

 

 

1. 오디오 실행 사용법 

 

자바스크립트에서 오디오를 실행하기 위해 아래 소스를 사용합니다. 

var audio = new Audio(filePath);

 

변수에 new Audio()를 선언하고 내부에 파일 경로를 입력합니다(파일 경로는 문자열로 입력). 

그리고 오디오를 load 한 후 오디오를 재생합니다. 

 

// load
audio.load();

// 볼륨 설정
audio.volume = 1;

// 실행
audio.play();

 

 

볼륨 조절은 0~1 사이의 숫자로 조절할 수 있습니다. 

또한 자바 프로젝트에서 경로는 webapp 하위 경로부터 작성해주면 됩니다.

저는 테스트 시 webapp 하위에 [sound]라는 이름으로 폴더를 만들고 그 폴더에 오디오 파일을 추가하여 테스트하였습니다.

2. 오디오 사용 예제

간단하게 버튼으로 오디오 실행하는 예제를 보도록 하겠습니다.

JavaScript 부분 

function fncSoundPlay(fileName)
{
	var audio = new Audio("/sound/"+fileName);
	audio.load();
	audio.volume = 1;
	audio.play();
}

 

HTML 부분 

<button onclick="fncSoundPlay('testFile.mp3')">
	Audio Test
</button>

 

 

3. 오디오 자동실행 

 

버튼이 아닌 자동재생을 원한다면 자동재생 속성을 사용하여 설정하면 됩니다.

 

audio.autoplay = true;

 

autoplay를 true로 설정하면 audio가 load 될 때 자동 재생되도록 설정할 수 있습니다.