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(){
	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>

如何在HTML5静音按钮中应用淡入淡出效果

1 个答案: