Javascript 在歌曲开始和结束时淡入/淡出音频

我有一个iTunes音频预览（30秒），可以突然启动和停止。我想给音频添加一些缓和，它在1秒时淡入淡出，在28秒时淡出。它会按应有的方式淡入，但在<代码>中不起作用，如果<代码>有条件。发生什么事了

HTML

<audio controls class="audio">
  <source src="http://a1.phobos.apple.com/us/r1000/023/Music/0b/f7/f8/mzm.dehsezty.aac.p.m4a" type="audio/mp4" />
</audio>

JS

$(function() {
  $(".audio").prop("volume", 0.0);

  $(".audio").on("play", function() {
    if (this.currentTime < 2) {
      $(this).animate({volume: 1.0}, 500);
    } else if (this.currentTime > 27) {
      $(this).animate({volume: 0.0}, 500);
    }
});

$（函数（）{
$（“.audio”）.prop（“音量”，0.0）；
$（“.audio”）.on（“播放”，函数（）{
如果（此.currentTime<2）{
制作动画（{volume:1.0}，500）；
}否则如果（this.currentTime>27）{
制作动画（{volume:0.0}，500）；
}
});

我还注意到，我必须在脚本端显式地将卷设置为0，而不是在音频标记中将值声明为属性（无影响）。我意识到这是一个属性，而不是属性，但是有没有办法在标记中设置默认值

<audio controls class="audio" volume="0.0">
  <source src="http://a1.phobos.apple.com/us/r1000/023/Music/0b/f7/f8/mzm.dehsezty.aac.p.m4a" type="audio/mp4" />
</audio>

---

从以下位置更改事件侦听器：

$(".audio").on("play", function() {

});

为此：

$(function() {
    $(".audio").prop("volume", 0.0);
    $(".audio").on("timeupdate", function() {
        if (this.currentTime < 2) {
            $(this).stop().animate({volume: 1.0}, 1000);
        } else if (this.currentTime > 27) {
            $(this).stop().animate({volume: 0.0}, 1000);
        }
    });
});

$（函数（）{
$（“.audio”）.prop（“音量”，0.0）；
$（“.audio”）.on（“时间更新”，函数（）{
如果（此.currentTime<2）{
$（this.stop（）.animate（{volume:1.0}，1000）；
}否则如果（this.currentTime>27）{
$（this.stop（）.animate（{volume:0.0}，1000）；
}
});
});

这样，当音频播放时，

currentTime

变量将不断更新

---

问题是，事件侦听器只触发一次，就您的功能而言，

currentTime

始终等于

0

。这是可行的，但会出现两个不可预见的问题。第一个问题是，一旦歌曲结束，即使您再次单击播放按钮重新启动歌曲，音量也会返回到0。此外，还将跳过audio将引发事件。更改

$（此）。将
动画设置为
$（此）。停止（）。动画设置（）