javascript - 如何淡入和淡出音频？

我的网站上有音频，并且有一个播放/暂停按钮。目前一切都运转良好，但我发现播放和暂停都太突然了。每当按下播放/暂停按钮时，我都希望淡入和淡出音频。我将如何做到这一点？
任何帮助表示赞赏，在此先感谢!
请在这里查看我的代码笔: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();
  });

最佳答案

如果您为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)
}

如果您还有其他问题，我们很乐意为您提供帮助!

关于javascript - 如何淡入和淡出音频？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/64520315/