웹페이지에서 노래나 효과음 등을 재생시키기 위해서는 javascript를 사용하면 됩니다. 재생(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에 마지막으로 수정되었습니다.)
'Dev > javascript' 카테고리의 다른 글
| [jquery] css() 메서드로 css 속성 추가하기 (6) | 2020.12.12 |
|---|---|
| [jquery] html 메서드 정리 (0) | 2020.12.11 |
| [javascript] 정의와 동시에 호출이 가능한 즉시실행함수 (0) | 2020.12.10 |
| [jquery] textarea 최대 100자까지만 입력 가능하게 하기 (2) | 2020.12.09 |
| [javascript] checkbox 체크되었을 때 1, 안 되었을 때 0을 제출하고 싶다면 (11) | 2020.12.08 |
| [javascript] 자료형을 알고 싶다면 typeof (0) | 2020.12.04 |
| [javascript] 숫자를 문자열로 바꿔주는 String 함수와 toString 메서드 (0) | 2020.12.04 |
| [jquery] 웹페이지에서 이미지를 클릭하면 다른 이미지로 변경되게 하기(img1->img2->img1->img2->...) (10) | 2020.05.14 |