javascript - 使用javascript淡入/淡出播放/暂停音乐

Question

我想有两个 div 用于播放和暂停 mp3 文件，所以当您单击“播放”时，声音会淡入，而当您单击“暂停”时，声音会淡出。音频必须循环播放，但不能自动播放(在用户单击“播放”按钮 (div) 之前不应播放音乐)。

尝试了 .animate({volume: 0.0}, 1000); 但无法使其与循环一起工作。我已经搜索了很多解决方案，但没有找到符合我目标的任何东西......

Answer 1

我终于做到了:

$(document).ready(function() {

  $('#tone').prop("volume", 0.0);

  $('.play').click(function() {   
    $('#tone').animate({volume: 1.0}, 1500);
  });

  $('.pause').click(function() {   
    $('#tone').animate({volume: 0.1}, 1500);
  });

});

和

<audio id="tone" preload="auto" src="tone-2.mp3" autoplay loop></audio>

所以我实际上从一开始就播放了这首歌，但直到单击“播放”。