[JavaScript] Audio 객체를 이용한 음악 재생

사악미소 2018. 9. 27. 15:47

■ 웹 브라우저에서 MP3 음악 틀기

-. HTML5부터는 플래시와 같은 플러그인을 사용하지 않아도 Audio 태그를 사용할 수 있게 되었다.

-. 자바스크립트의 Audio 객체를 이용해서 음악을 플레이해 보자.

# Audio 객체의 속성

속성 이름	설 명
src	· 재생하려는 음악 파일 경로
volume	· 음악의 음량 · 음량조절은 0부터 1까지 소수점 단위로 조절할 수 있다.(예 : 0.5)
currentTime	· 음악의 현재 위치(초 단위)

# Audio 객체의 메서드

메서드 이름	설 명
play( )	· 음악을 재생
pause( )	· 음악을 일시정지

# 정지(STOP) 기능

-. Audio 객체는 정지(STOP) 메서드가 없다.

-. 음악을 정지하고 처음위치로 이동하고 싶을때는 pause( ) 메서드를 사용하고 currentTime 속성을 0으로 바꿔주어야 한다.

# 소스코드

<html>
<head>
<title>:: JAVASCRIPT 음악 재생 ::</title>
<script type="text/javascript">

   // Audio 객체생성 ①
   // var audio = new Audio('./lucky.mp3');

   // Audio 객체생성 ②
   var audio = new Audio();
    audio.src = "./lucky.mp3";

</script>
</head>
<body>
   <input type="button" onClick="audio.play();" value="PLAY"/>
   <input type="button" onClick="audio.pause();" value="PAUSE"/>
   <input type="number" onChange="audio.currentTime=this.value"/>
   <input type="number" onChange="audio.volume=this.value"/>
</body>
</html>

# 출력결과

저작자표시 (새창열림)