Question

我希望，当离开页面时，执行音乐提示的淡入淡出，而不是突然切断。如果淡入淡出为执行链接所需的时间增加了半秒，我可以。

我有以下代码执行播放音乐提示的淡出。

<audio id="myAudio"
  <source src="./audio/pluto.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio>

和

<script>
  function fadeAudio()
  {
    if (myAudio.volume > 0) 
    {
        myAudio.volume = Math.max(0, myAudio.volume - 0.05);
        setTimeout(fadeAudio, 20);
    }
  }
</script>

我用一个按钮测试了这个代码，它运行正常（有时会有一些拉链，但我更喜欢它突然切断）。

<button onclick="fadeAudio()">Try it</button>

我的问题是，在导航之前，我不知道如何调用和执行此淡入淡出。我正在查看html＆＃39> onbeforeunload ，但这似乎完全适合打印警告提示，无法插入我介入的fadeAudio（）函数。

简单地完成以下任务：

<body onbeforeunload="fadeAudio()">

这也不适用于 onunload 。

我在想另一种方法是重写页面上的链接以首先运行fadeAudio（）函数。（对我来说更重要的是，我的页面之间的过渡听起来比用户决定关闭或去其他地方听起来更好。）也许这可以通过制作一个按钮并按顺序调用fadeAudio和链接功能来完成。但似乎可能还有一种更简洁的方式。有什么建议吗？

Answer 1

以下是我发现的那种作品：（1）在链接中，可以调用一个函数（2）在函数中，我首先调用fadeAudio（）函数，然后我调用一个setTimeout（）函数，分配1000毫秒时间，以允许fadeAudio（）完成（3）然后setTimeout调用目标链接的window.open（）方法。

我将调整各种时间，看看我可以在不增加太多拉链的情况下收紧多少。这肯定会让我的网站上的位置变得有点迟钝。

如果声音在自己的线程中消失，而新的页面出现，那会不会很好。如果有办法，我很想知道它。

在脚本标记中：

  function linkToHome()
  {
      fadeAudio();
      setTimeout(openHome, 1000); 
  }

  function openHome()
  {
    window.open('index.htm','_self');
  }

HTML中的URL调用：

  <a href="javascript:linkToHome()">Home</a>

可能会尝试找出一种方法来对上述内容进行参数化，以允许方法或标记包含目标网址。

HTML淡化链接上的音乐

1 个答案: