Fiddle

Question

我有一个iTunes音频预览（30秒）突然开始和停止。我想为音频添加一些缓动，它在一秒钟标记处消失，在28秒标记处淡入淡出。它应该淡入，但在else if条件下不起作用。发生了什么事？

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);
    }
});

我还注意到，我必须在脚本端将音量显式设置为0，然后将值声明为音频标签中的属性（无影响）。我意识到它是属性vs属性，但有没有办法在标记中设置默认值？

<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>

Answer 1

从此处更改您的事件监听器：

$(".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);
        }
    });
});

这样currentTime变量会在音频播放时不断更新。

在歌曲的开头和结尾淡入/淡出音频

1 个答案:

Fiddle