HTML5 audio fade in and out

Wednesday, 22 April 2015

I’ve just discovered that the animate function within jQuery can provide more than just visual animation. One such ‘animation’ is adjusting the volume in the audio tag, thus creating a good method for creating fade in or fade out:


$(‘.btn-fadeout’).on(‘click’, function(e) {
	e.preventDefault();
	audio_player = $(‘audio.audio_player`);
	audio_player.animate(
		{ volume: 0 }, // Target volume
		500, // How long should the fadeout take
		function() {
			audio_player[0].pause(); // Pause the audio
			audio_player[0].currentTime = 0; // Be kind, rewind.
			audio_player[0].volume = 1; // Reset volume
		}
	);
}

Post changelog

Back to all posts