아보카도 개인홈에 마우스 클릭 효과음을 어떻게 넣을 수 있을까요?
본문
어찌저찌 인터넷에서 일단 찾아서 코드를 public_html - head.php 맨 아래에 넣었는데
소리가 나오긴 하는데 툴바(menu)라거나 게시글을 클릭할 때는 소리가 전혀 안 나네요ㅠㅠ
그냥 아예 개인홈 안에서 마우스 달칵달칵 할때마다 소리가 들어가게 하고 싶은데 어떻게 해야 할까요?
이하는 head.php에 넣었던 코드입니다...
<!-- 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>답변 3
<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>
이곳을 클릭 시험
</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
'이부분 링크에 에 오타가 있습니다. "./" 이 부분을 제거 하세요
링크를 클릭해 페이지가 새로고침 되는 경우는
audio 를 미처 재생하기도 전에 그 동작이 먼저 실행되기 때문입니다.
이런 경우 비동기 함수를 통한 편법으로 해결할수 있습니다.
<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>
답변을 작성하시기 전에 로그인 해주세요.
