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

所以我其实有这首歌p从开始铺设，但静音，直到 “玩”被点击。