暂停音乐，暂停时淡入/淡出 - Pause music with fade in/out when paused?

Pause music with fade in/out when paused?

本文关键字：暂停淡出淡入音乐 | 更新日期: 2023-09-27

>我有一个音乐脚本，但是当我点击空格（又名暂停按钮）时，我希望它暂停它已经做的音乐，但我希望它像spotify一样淡入/淡出

这是我到目前为止的代码：

var play = true;
var myAudio = document.getElementById("music");
function onKeyDown(event) {
        switch (event.keyCode) {
            case 32: //SpaceBar                    
                if (play) {
                    myAudio.pause();
                    play = false;
                } else {
                    myAudio.play();
                    play = true;
                }
                break;
        }
  return false;
}
window.addEventListener("keydown", onKeyDown, false);

我认为这在本机API中是不可能的。但是，您绝对可以创建一个可以执行此操作的帮助程序函数。您可以访问音量控件，因此您可以执行以下操作：

function fadeOut(song) {
  if (song.volume === 0) {
    play = false;
    // Pause the song so it doesn't keep playing in the background
    song.pause();
    return;
  }
  // Set your fadeout interval here
  song.volume -= someInterval;
  // Return this function after some interval, and pass it the same song
  return setTimeout(fadeOut, 100, song);
  // Change the timeout interval for faster / slower fades
  // Reverse this for a fade in effect
}

当您减小音量时，这是

每次调用此函数时音量下降的数量，这是毫无价值的。setTimeout 间隔是我们调用此函数的频率。因此，超时越快，音量变化越小，淡出听起来就越"平滑"。只是要注意不要混淆这两个间隔。他们都做不同的事情。

编辑：您可能希望跟踪开始淡出时的音量，这样，您就可以在淡入时返回它。否则，您每次都会从静音到最大音量，这不是非常灵活或用户友好。