web에서 효과음 내기 - 풀스택개발 EastFlag

안드로이드나 아이폰을 개발하면 쉽게 할 수 있는 배경음악이나 효과음을 웹에서도 구현하는것이 가능할까? 가능하다. html5에 새로추가된 Audio 객체를 사용함으로써 가능해졌다.

버튼 클릭시 버튼 효과음을 내는것을 두가지 방법으로 구현해보자.

여기서 사용된 소스는 다음과 같다.

+ https://github.com/eastflag/html5/tree/master/web_api/audio

먼저 버튼 효과음을 다운로드 받느다. 구글에서 무료 효과음이라고 검색하면 많아 나오므로 적당한것을 찾으면 된다. 여기서는 https://www.soundjay.com/button-sounds-2.html 에서 button-16.mp3 를 다운로드 했다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="button.js"></script>
</head>
<body>
  <button onclick="button_click()">Audio 객체</button>
  <button onclick="button2_click()">DOM 객체</button>
  <audio src="button-16.mp3" id="audio1"></audio>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<button onclick="button_click()">Audio 객체</button>

</body>

</html>

// 무료 효과음 소스
// https://www.soundjay.com/

// 사용된 버튼 소스
//  https://www.soundjay.com/button-sounds-2.html
// button-16.mp3 다운로드

// 생성자 함수로 Audio 객체 생성
function button_click() {
  var audio = new Audio('button-16.mp3');
  audio.play();
}

// DOM api로 audio element 얻기
function button2_click() {
  var node = document.querySelector('#audio1');
  node.play();
}

// 무료 효과음 소스

// https://www.soundjay.com/

// 사용된 버튼 소스

// https://www.soundjay.com/button-sounds-2.html

// button-16.mp3 다운로드

// 생성자 함수로 Audio 객체 생성

function button_click() {

var audio = new Audio('button-16.mp3');

audio.play();

}

// DOM api로 audio element 얻기

function button2_click() {

var node = document.querySelector('#audio1');

node.play();

}

첫번째 버튼을 클릭하며 new Audio(‘button-16.mp3’) 로 오디오 객체를 생성하고 플레이 play() 함수로 플레이하였다.

두번째는 DOM으로 audio 객체를 생성하였다. document.querySelector(‘#audio1’) 으로 해당 노드를 가져왔다. 해당 노드가 DOM에서는 객체에 해당하며 오디오 엘리먼트이므로 객체로서는 오디오 객체와 동일하게 된다.