jQuery Plugin for Fade-in and Fade-out HTML5 Audio - fadeaudio

fadeaudio is a jQuery Html5 audio controller plugin that allows you to fade your HTML5 audio in or out.

How to use it:

1. Include jQuery library and fadeaudio.js on your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/jquery.fadeaudio.js"></script>

2. Create html using html5 audio tag

<audio id="demo" preload="metadata">
<source src="audio/streetmusic-harmonica.mp3" type="audio/mpeg"></source>
<source src="audio/streetmusic-harmonica.ogg" type="audio/ogg"></source>
<source src="audio/streetmusic-harmonica.wav" type="audio/wav"></source>
</audio>

3. Call the plugin with options

<script type="text/javascript">
$('#demo')[0].play();
$('#demo').fadeaudio({
'fade_in_start' : 0, // Where to start the fade in (in seconds)
'fade_in_interval' : 200, // How often to repeat the increase in volume (in milliseconds)
'fade_out_start' : 50, // Where to start the fade out (in seconds)
'fade_out_interval' : 200, // How often to repeat the decrease in volume (in milliseconds)
'step' : 0.02 // Units by which to change volume, where 1 = 100 percent.
});
</script>

 

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.