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

Posted 2023-02-25

【中文标题】如何在 HTML5 静音按钮中应用淡入淡出效果

【英文标题】：How to apply a fade effect in HTML5 mute button

【发布时间】：2016-10-03 19:29:32

【问题描述】：

我有一个静音按钮，可以简单地将 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>

【问题讨论】：

把所有东西都放在动画函数中

@KarthikeyanSekar 喜欢这个audio.animate(volume: 1, audio.muted = false, 2000); ?

HTML5 <audio> playback with fade in and fade out的可能重复

【参考方案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>

【讨论】：

如果audio.muted = true 显然无法为音频设置动画，因此取消静音动画无法正常工作。我通过解决这个问题改进了我的答案；）