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

所以我实际上从一开始就播放这首歌，但直到 ＆＃34;发挥＆＃34;点击。