HTML5 음소거 버튼에 페이드 효과를 적용하는 방법

Question

HTML5 오디오 객체를 음소거하는 음소거 버튼이 있습니다. 그것은 트랙을 음소거하지만 페이드 인/아웃 효과를 추가하고 싶습니다. audio.animate({volume: 0}, 2000);을 추가했지만 작동하지 않습니다.

아이디어가 있으십니까?

감사합니다.

audio = new Audio(); 
 
audio.src = "http://myst729.qiniudn.com/within-temptation_pale.mp3" 
 
audio.play(); 
 

 
$(".mute").on("click tap", function(){ 
 
\t if (audio.muted) { 
 
      audio.animate({volume: 1}, 2000); 
 
      audio.muted = false; 
 
      $(this).text("mute"); 
 

 
     } else { 
 
      audio.muted = true; 
 
      audio.animate({volume: 0}, 2000); 
 
      $(this).text("unmute"); 
 
     } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="mute">mute</button>

는

Answer 1

audio 객체 JQuery와 .animate() 함수를 사용하기 위해 JQuery와 오브젝트이어야한다. audio.animate을 $(audio).animate으로 변경하면됩니다.

또한 audio.muted = ... 문은 음악을 즉시 끄고 켜기 때문에 애니메이션이 들리지 않습니다.

동작하는 예제 :

audio = new Audio(); 
 
audio.src = "http://myst729.qiniudn.com/within-temptation_pale.mp3" 
 
audio.play(); 
 

 
$(".mute").on("click tap", function() { 
 
    var $btn = $(this); 
 
    
 
    var muted = audio.muted; 
 
    if (muted) audio.muted = false; // It cannot be animated if it's muted 
 
    
 
    $btn.prop('disabled', true); // Optional 
 
    $(audio).animate({volume: muted ? 1 : 0}, 2000, function() { 
 
    audio.muted = !muted; 
 
    $btn.text(muted ? "mute" : "unmute"); 
 
    $btn.prop('disabled', false); // Optional 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="mute">mute</button>