如何创建一个在鼠标输出时淡出音频的javascript函数？

<audio id="myAudio" src="audio.mp3"></audio>

function fadeOutAudioOnMouseout(elementId) {
  var audio = document.getElementById(elementId);

  // 保存原始音量
  var originalVolume = audio.volume;

  // 鼠标移入事件处理函数
  audio.onmouseover = function() {
    // 播放音频
    audio.play();
  }

  // 鼠标移出事件处理函数
  audio.onmouseout = function() {
    // 每100毫秒递减音量
    var fadeoutInterval = setInterval(function() {
      if (audio.volume > 0) {
        audio.volume -= 0.01; // 可自行调整递减的速度
      } else {
        // 音量为0时停止音频播放，并恢复原始音量
        audio.pause();
        audio.volume = originalVolume;
        clearInterval(fadeoutInterval);
      }
    }, 100);
  }
}

// 调用函数，传入音频元素的ID
fadeOutAudioOnMouseout("myAudio");

<script>
  // 页面加载完成时调用函数
  window.onload = function() {
    fadeOutAudioOnMouseout("myAudio");
  };
</script>