Play/pause 淡入淡出 in/fade 的音乐 javascript

Question

我想有两个 div 用于播放和暂停 mp3 文件，所以当您单击 "play" 时声音会淡入，而当您单击 "pause" 时声音会淡出出去。音频必须循环播放，但不能自动播放（在用户单击 "play" 按钮 (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>

所以我实际上从一开始就播放了这首歌，但一直静音直到 "play" 被点击。

Play/pause 淡入淡出 in/fade 的音乐 javascript

Play/pause music with fade in/fade out with javascript

javascript

audio

jquery

fadein

jquery-animate