如何在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对象以使用的JQuery .animate()功能。您可以将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>