특정 스크롤 영역을 지날때 오디오를 재생하게끔 하는 요청이 들어왔습니다.
테스트를 위해 짜본 코드 공개합니다.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio Test</title>
</head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<body>
<div id="info"></div>
<div style="height:500px;"></div>
<input type="button" onclick="audio.play();" value="Play">
<input type="button" onclick="audio.pause();" value="Stop">
<div style="height:2500px;"></div>
</body>
</html>
javascript
var audio = new Audio('오디오파일.mp3'); //저작권 문제로 오디오 파일은 지웠습니다.
//audio.play();
$(window).scroll(function () {
var position = $(window).scrollTop();
$('#info').innerText = position;
if (position > 100) {
console.log('detect');
audio.play();
}
});스크롤로 100px 영역을 지날때 자동적으로 사운드가 재생됩니다.
재생 되더라도 버튼으로 제어도 가능합니다.
728x90
'프로그램 강좌' 카테고리의 다른 글
| [Util]JSON view (0) | 2021.05.21 |
|---|---|
| [html]favicon 만들기 & 코딩 방법 (0) | 2021.05.18 |
| [javascript]Continue, Break, Return 정리 (0) | 2021.05.06 |
| [Excel]countA, countIF 사용하는 방법 (0) | 2021.04.28 |
| [javascript]parseInt 정수 처리 (0) | 2021.04.16 |
