James Doc avatar

James Doc

HTML5 audio fade in and out

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
		}
	);
}

Recent entries...