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

Posted 2023-05-08

【中文标题】使用javascript淡入/淡出播放/暂停音乐

【英文标题】：Play/pause music with fade in/fade out with javascript

【发布时间】：2017-01-23 11:51:48

【问题描述】：

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

试过.animate(volume: 0.0, 1000);，但不能让它与循环一起工作。我已经搜索了很多解决方案，但没有找到任何适合我的目标...

【参考方案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>

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