아보카도 개인홈에 마우스 클릭 효과음을 어떻게 넣을 수 있을까요? 채택완료
최희수
3년 전
조회 4,288
어찌저찌 인터넷에서 일단 찾아서 코드를 public_html - head.php 맨 아래에 넣었는데
소리가 나오긴 하는데 툴바(menu)라거나 게시글을 클릭할 때는 소리가 전혀 안 나네요ㅠㅠ
그냥 아예 개인홈 안에서 마우스 달칵달칵 할때마다 소리가 들어가게 하고 싶은데 어떻게 해야 할까요?
이하는 head.php에 넣었던 코드입니다...
<!-- sound -->
<div onclick="play()"><audio id='audio_play' src='./<a href="https://blog.kakaocdn.net/dn/nMIxu/btrPgLf7Ybp/ITLSCDzEJffoiPBkzXw181/button-3.mp3?attach=1&knm=tfile.mp3" target="_blank" rel="noopener noreferrer">https://blog.kakaocdn.net/dn/nMIxu/btrPgLf7Ybp/ITLSCDzEJffoiPBkzXw181/button-3.mp3?attach=1&knm=tfile.mp3</a>
'></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>
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
3년 전
이곳을 클릭 시험
src='https://blog.kakaocdn.net/dn/nMIxu/btrPgLf7Ybp/ITLSCDzEJffoiPBkzXw181/button-3.mp3?attach=1&knm=tfile.mp3
'이부분 링크에 에 오타가 있습니다. "./" 이 부분을 제거 하세요
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
3년 전
링크를 클릭해 페이지가 새로고침 되는 경우는
audio 를 미처 재생하기도 전에 그 동작이 먼저 실행되기 때문입니다.
이런 경우 비동기 함수를 통한 편법으로 해결할수 있습니다.
</p>
<p><style>
.btn_test {
background-color: #eee;
cursor: pointer;
display: inline-block;
padding: 0.2em 1em;
}
.btn_test:hover {
background-color: #ccc;
}
</style></p>
<p><script>
var audio = null;</p>
<p>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);
});
}</p>
<p> new Promise((resolve, reject) => { resolve(false); });
}</p>
<p>document.addEventListener('DOMContentLoaded', function () {
audio = document.getElementById('audio_play');
// audio.volume = 0.5;</p>
<p> async function fn_click(evt) {
evt.preventDefault();</p>
<p> var p = await play();
if (p == true) {
location.href = this.href;
} else {
alert('something is wrong');
}
}</p>
<p> 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></p>
<p><audio id='audio_play' src='<a href="https://blog.kakaocdn.net/dn/nMIxu/btrPgLf7Ybp/ITLSCDzEJffoiPBkzXw181/button-3.mp3?attach=1&knm=tfile.mp3'></audio>" target="_blank" rel="noopener noreferrer">https://blog.kakaocdn.net/dn/nMIxu/btrPgLf7Ybp/ITLSCDzEJffoiPBkzXw181/button-3.mp3?attach=1&knm=tfile.mp3'></audio></a></p>
<p><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></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인