用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從開始鋪設，但靜音，直到 「玩」被點擊。