如何淡入和淡出音频？

Posted 2023-02-25

【中文标题】如何淡入和淡出音频？

【英文标题】：How to fade in and out of audio?

【发布时间】：2020-10-25 04:20:03

【问题描述】：

我的网站上有一个音频，我有一个播放/暂停按钮。目前一切正常，但我只是发现播放和暂停太突然了。每当按下播放/暂停按钮时，我想淡入和淡出音频。我怎么能做到这一点？

任何帮助表示赞赏，在此先感谢！

请在此处查看我的代码笔：https://codepen.io/cocotx/pen/rNLjbPK?editors=1010

<audio id="audio" loop>
        <source src="https://www.kozco.com/tech/LRMonoPhase4.wav" type="audio/mpeg">
      </audio>

<button id="play-pause">play/pause</button>

const song = document.querySelector("#audio");

  let pPause = document.querySelector('#play-pause');

  let playing = true;
  function playPause() 
      if (playing) 
          const song = document.querySelector('#audio');

          song.play();
          playing = false;
       else 

          song.pause();
          playing = true;
      
  

$('#play-pause').click(function() 
    playPause();
  );

【参考方案1】：

如果您为audiolength 和currenttime 设置了一个变量，并将fade 设置为您想要的淡入和淡出长度，您可以快速轻松地完成此操作。

而且，函数看起来像这样。您将需要在页面首次加载时调用此函数，但它会保持自身运行。

volc = 1 / fade

function Fade() 
    if (currenttime + fade >= audiolength) 
    song.volume = song.volume - volc;
    

    if (currenttime <= fade) 
        song.volume = song.volume + volc
    

    setTimeout(Fade, 50)

如果您还有任何问题，我很乐意为您提供帮助！

【讨论】：

您好，感谢您的详细回复！但是我正在寻找一种更快的方法来使用我当前的 playPause 代码执行此操作，并且我找到了一种对我来说非常有效的 jQuery 方法。再次感谢！

【参考方案2】：

您可以使用 CSS 轻松实现淡入淡出效果。

const song = document.querySelector("#audio");

let pPause = document.querySelector('#play-pause');

let playing = true;

function playPause() 
  if (playing) 
    const song = document.querySelector('#audio');
    song.play();
    playing = false;
   else 

    song.pause();
    playing = true;
  


$('#play-pause').click(function() 
  playPause();
);

#play-pause 
  opacity: 0.4;
  transition: opacity 0.5s ease-out;


#play-pause:hover 
  opacity: 1;
  transition: opacity 0.5s ease-in;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<audio id="audio" loop>
        <source src="https://www.kozco.com/tech/LRMonoPhase4.wav" type="audio/mpeg">
      </audio>

<button id="play-pause">play/pause</button>

我只是使用带有过渡属性的悬停。如果要完全淡出，可以将不透明度更改为 0，当然，您可以根据需要更改过渡。希望这会有所帮助。祝你有美好的一天。

【参考方案3】：

我最终使用 jQuery 为音量设置动画，这对我来说效果很好：

let playing = true;
  function playPause() 
      if (playing) 
          const song = document.querySelector('#audio');

          //relevant part to fading in audio
          song.volume = 0;
          $('#audio').animate(volume: 1.0, 1000);
          song.play();

          playing = false;
       else 
          //relevant part to fading out audio
          song.volume = 1;
          $('#audio').animate(volume: 0, 1000, function() 
            song.pause();
          );

          playing = true;
      
  

我发现这最适合我的需要，但仍然感谢任何试图提供帮助的人！

【参考方案4】：

这对我来说不需要 jQuery 并且非常可配置。在淡入开始之前它也有延迟

function fadeIn(audioElement, maxVol, startDelay, fadeInTime, steps) 
  let i = 0;
  let interval = fadeInTime / steps;
  setTimeout(function () 
    let intervalId = setInterval(function() 
      let volume = (maxVol / steps) * i;
      audioElement.volume = volume;
      if(++i >= steps)
        clearInterval(intervalId);
    , interval);
  , startDelay);