아보카도 개인홈에 마우스 클릭 효과음을 어떻게 넣을 수 있을까요?

최희수

프로필 보기 이 회원 글보기 이 회원의 댓글보기

3년 전 5,034

어찌저찌 인터넷에서 일단 찾아서 코드를 public_html - head.php 맨 아래에 넣었는데

소리가 나오긴 하는데 툴바(menu)라거나 게시글을 클릭할 때는 소리가 전혀 안 나네요ㅠㅠ

그냥 아예 개인홈 안에서 마우스 달칵달칵 할때마다 소리가 들어가게 하고 싶은데 어떻게 해야 할까요?

이하는 head.php에 넣었던 코드입니다...

Copy

<!-- sound -->
<div onclick="play()"><audio id='audio_play' src='./https://blog.kakaocdn.net/dn/nMIxu/btrPgLf7Ybp/ITLSCDzEJffoiPBkzXw181/button-3.mp3?attach=1&knm=tfile.mp3
'></audio> 
<script type="text/javascript"> 
function play() { 
    var audio = document.getElementById('audio_play'); 
    if (audio.paused) { 
        audio.play(); 
    }else{ 
        audio.pause(); 
        audio.currentTime = 0 
    } 
} 
</script>

그누보드5 아보카도에디션 마우스 효과음 php

답변 3개

채택된 답변

+20 포인트

설국열차

프로필 보기 이 회원 글보기 이 회원의 댓글보기

3년 전

이곳을 클릭 시험
</div>
<script type="text/javascript">
function play() {
var audio = document.getElementById('audio_play');
if (audio.paused) {
audio.play();
}else{
audio.pause();
audio.currentTime = 0
}
}
</script>

 src='https://blog.kakaocdn.net/dn/nMIxu/btrPgLf7Ybp/ITLSCDzEJffoiPBkzXw181/button-3.mp3?attach=1&knm=tfile.mp3
'이부분 링크에 에 오타가 있습니다. "./" 이 부분을 제거 하세요

elmokertzmann

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전

설국열차 공식으로 다시 해봤는데 정말 잘 되더군요.

getting over it

배르만

프로필 보기 이 회원 글보기 이 회원의 댓글보기

3년 전

링크를 클릭해 페이지가 새로고침 되는 경우는

audio 를 미처 재생하기도 전에 그 동작이 먼저 실행되기 때문입니다.

이런 경우 비동기 함수를 통한 편법으로 해결할수 있습니다.

Copy

<style>
.btn_test {
  background-color: #eee;
  cursor: pointer;
  display: inline-block;
  padding: 0.2em 1em;
}
.btn_test:hover {
  background-color: #ccc;
}
</style>

<script>
var audio = null;

async function play() {
  if (audio != null) {
    if (audio.paused) { 
      audio.play();
    }else{ 
      audio.pause(); 
      audio.currentTime = 0;
    }
    
    return new Promise((resolve, reject) => {
      var timer = setInterval(function () {
        if (audio.ended == true) {
          clearInterval(timer);
          resolve(true);
        }
      }, 1);
    });
  }

  new Promise((resolve, reject) => { resolve(false); });
}

document.addEventListener('DOMContentLoaded', function () {
  audio = document.getElementById('audio_play'); 
  // audio.volume = 0.5;

  async function fn_click(evt) {
    evt.preventDefault();

    var p = await play();
    if (p == true) {
      location.href = this.href;
    } else {
      alert('something is wrong');
    }
  }

  var a = document.getElementsByTagName('a');
  for (var i = 0, i_len = a.length; i < i_len; i++) {
    a[i].addEventListener('click', fn_click, false);
  }
}, false);
</script>

<audio id='audio_play' src='https://blog.kakaocdn.net/dn/nMIxu/btrPgLf7Ybp/ITLSCDzEJffoiPBkzXw181/button-3.mp3?attach=1&knm=tfile.mp3'></audio>

<div class="btn_test" onclick="play()">div</div>
<a class="btn_test" href="">a</a>
<a class="btn_test" href="?b=2">b</a>
<a class="btn_test" href="?c=3">c</a>

답변을 작성하려면 로그인이 필요합니다.

아보카도 개인홈에 마우스 클릭 효과음을 어떻게 넣을 수 있을까요?

답변 3개

공유하기