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

Posted at 2018. 9. 27. 15:47 | Posted in JavaScript & jQuery/JavaScript




■ 웹 브라우저에서 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>




# 출력결과








Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기