마우스 클릭음이 연속해서 나오지 않는 문제
본문
안녕하세요~
다음과 같은 코드를 사용해서 홈페이지에 마우스 클릭음이 나오게 해뒀는데요,
<div onclick="play()"><audio id="audio_play" src="https://soundeffect-lab.info/sound/button/mp3/cursor12.mp3"></audio>
<script type="text/javascript">
function play() {
var audio = document.getElementById('audio_play');
audio.volume = 0.5;
if (audio.paused) {
audio.play();
}else{
audio.pause();
audio.currentTime = 0
audio.play();
}
}
</script>
마우스를 연속해서 다다다닥 클릭하면 클릭음이 나오지를 않습니다 ㅠㅠ
0.5초정도 간격을 두고 마우스를 클릭하면 잘 작동하구요.
0.5초보다 빠르게 클릭하면 아예 아무 소리도 들리지 않습니다.
뭐가 문제일까요?
답변 3
해당 테그에 클릭시에 play() 함수에 이벤트를 정상적으로 호출 하는지를 먼저 확인해보시기 바랍니다.
중간에 console.log("이벤트 넘어옴" ) <-- 요런식으로 로그를 한번 출력해서 대재로 출력되는지 확인해보시면될꺼 같습니다.
해당 방법으로 로그를 출력 해 보았는데 로그 출력이 정상적으로 되지 않고 있네요... (연속해서 클릭하면 로그 출력 안 됨) 코드 문제는 아닌 것으로 확인했습니다 감사합니다 ㅠ
mp3 파일을 로딩하는데 시간이 걸릴 수 있을 것입니다.
wav 파일로 변환해서 사용해 보세요..
ㅠㅠㅠ말씀 듣고wav파일로 변경했는데도 마찬가지였어요.. 혹시 사이트 설정에 문제가 있는걸까요??
지금 코드는 한번 클릭하는 이벤트에서만 작동하게 됩니다.
그런데 님이 바라는건 더블클릭 이벤트에서도 작동하는거라 보는데...
그러니 더블클릭 이벤트 처리도 해주면 문제는 해결될거 같아요.
<div onclick="play()" ondblclick="dblclick(event)">
<script>
function dblclick(e) {
e.preventDefault();
e.stopPropagation();
e.target.click();
}
</script>
이렇게 ... 도움이 되길!!!
답변을 작성하시기 전에 로그인 해주세요.