2020-06-02 18:03:16

웹페이지에서 노래나 효과음 등을 재생시키기 위해서는 javascript를 사용하면 됩니다. 재생(play) 버튼을 누르면 오디오 파일이 재생되고, 일시정지(pause) 버튼을 누르면 재생되던 오디오가 잠시 멈추도록 코딩해보겠습니다. 

 

Play 버튼을 누르면 재생, Pause 버튼을 누르면 일시정지


html 코드는 다음과 같습니다. 예쁘게 꾸밀 것이 아니라면 html 코드만 있어도 됩니다. 

 

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<script>
    var audio = new Audio('sound.wav');

</script>

<body>
    <input type="button" onclick="audio.play();" value="PLAY"> <!--재생-->
    <input type="button" onclick="audio.pause();" value="PAUSE"> <!--일시정지-->

</body>
</html>

 

참고로 이렇게 코딩했을 때에는 index.html과 sound.wav는 같은 디렉토리에 있어야합니다. 

 

index.html을 열어서 PLAY 버튼을 누르니 음악이 재생되고, PAUSE 버튼을 누르니 재생되던 음악이 일시정지되었습니다. 그리고 다시 PLAY 버튼을 누르니 다시 이어서 재생되네요. 

 

만약 오디오를 무한 반복 재생시키고 싶다면 몇 줄의 코드를 더 넣어주면 됩니다. 

 

 

index.html (무한 반복 재생을 원할때)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<script>
    var audio = new Audio('sound.wav');

    /*추가된 부분: 종료되면 처음부터 다시 재생*/
    audio.addEventListener('ended', function() { 
        this.currentTime = 0;
        this.play();
    }, false);
    
</script>

<body>
    <input type="button" onclick="audio.play();" value="PLAY"> <!--재생-->
    <input type="button" onclick="audio.pause();" value="PAUSE"> <!--일시정지-->

</body>
</html>

 

잘 되시나요?ㅎㅎ 

 

이것을 활용해서 저는 백색소음으로 아기 재우는 웹 서비스를 만들어봤습니다. 이것을 좀 더 발전시키면 간단한 스마트폰 어플도 만들 수 있답니다. 웹페이지를 보여주는 웹뷰앱으로 만들면 쉽게 만들 수 있습니다. 

 

참고자료

[1] https://stackoverflow.com/questions/3273552/html5-audio-looping, stackoverflow, "HTML5 Audio Looping"

[2] https://wickedmagica.tistory.com/84, 사악미소, "[JAVASCRIPT] Audio 객체를 이용한 음악 재생"

 

 

(이 글은 2021-2-16에 마지막으로 수정되었습니다.)