如何淡入和淡出音频？答案

【问题标题】：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();
  });

【问题讨论】：

标签： javascript jquery audio

【解决方案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);
}

【讨论】：