Untitled

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script type="text/javascript">
	var events=["abort","canplay","canplaythrough","durationchange","emptied","ended",
			"error","loadeddata","loadedmetadata","loadstart","pause","play","playing",
			"progress","ratechange","readystatechange","seeked","seeking","stalled",
			"suspend","timeupdate","volumechange","waiting"]
	// The Plugin.
	$.fn.scrollPlay=function(O){
		return this.each(function(){
			var audio=this
			audio.volume=0
			audio.play() // iPhone does not allow play without a click, nor can you change the volume!
			$(window).on('scroll scroll-music',function(){
				var st=$(window).scrollTop(),
					isLoud=$(audio).is('.loud')
					loud=st>=O.top && st< O.bottom,
					isIgnored=$(audio).is('.ignored')
				if (isIgnored){
					if(audio.volume!=0){
						$(audio).trigger("scroll-before-off").stop().animate({volume:0},O.duration,function(){
								$(audio).trigger("scroll-off")
						})
					}
				}else if (isLoud !==loud){
					if (isLoud){
						$(audio).trigger("scroll-before-off").stop().animate({volume:0},O.duration,function(){
							$(audio).trigger("scroll-off")
						})
					}else{
						$(audio).trigger("scroll-before-on").stop().animate({volume:1},O.duration,function(){
							$(audio).trigger("scroll-on")
						})
					}
					$(audio).toggleClass('loud',loud)
				}
			}).trigger('scroll-music')
		})
	}
	// a sample way to call it.
	$(function(){
		var set=localStorage.musicSet
		if (set)
			$('.set1,.set2').not('.'+set).addClass('ignored')
		else
			$('.set2').addClass('ignored')
		$('.switch').click(function(){
			var set=this.id
			localStorage.musicSet=set
			$('.set1,.set2').addClass('ignored').removeClass('loud').filter('.'+set).removeClass('ignored')
			$(window).trigger('scroll-music')
		})

		$('#soundTour3,#soundTour2').scrollPlay({
			top:-Infinity,
			bottom:1400,
			duration:2000
		})

		$('#soundTour4,#soundTour5').scrollPlay({
			top:1400,
			bottom:2800,
			duration:2000
		})
		$('#soundTour99').scrollPlay({
			top:2800,
			bottom:Infinity,
			duration:2000
		})
		$('audio').on({// only needed for debugging
			volumechange:function(){
				$('#monitor_'+this.id).width(this.volume*100).text('*')
			},
			'scroll-before-off scroll-before-on scroll-off scroll-on':function(e){
				$('#musicStatus').prepend("<div>"+e.type +" " + $(this).attr('src')+"</div>")
			}
		})
		$(window).scroll(function(){
			var top=$(window).scrollTop(),
				currentDiv=0,
				active=false
			if (top<0) return
			$('.float').parent().each(function(i){
				var float=$(this).find('.float'),
					dTop = $(this).offset().top,
					dHeight=$(this).outerHeight(),
					bHeight=float.outerHeight(),
					dBottom = dTop + dHeight,
					current = dTop <= top && dBottom >= top
				if(current) {
					active=current&& top-dTop<dHeight-bHeight
					currentDiv=i
					if(active){
						float.css({top:top-dTop})
					}
					return false
				}
			})
			$('.float').each(function(i){
				if(i<currentDiv || (i==currentDiv && !active))
					$(this).css({top:$(this).parent().outerHeight()-$(this).outerHeight()})
				else if(i>currentDiv)
					$(this).css({top:0})
			})
		}).trigger('scroll')
	})
	function isElementInViewport(el) {
		var rect = el.getBoundingClientRect();
		return (
			rect.top >= 0 &&
			rect.left >= 0 &&
			rect.bottom <= (window.innerHeight || document. documentElement.clientHeight) &&
			rect.right <= (window.innerWidth || document. documentElement.clientWidth)
			);
	}
	</script>
	<style type="text/css">
		html,body{ height:5500px;background:beige;border:0;margin:0;padding:0;}
		#musicStatus,#buttons
		{
			background-color: #87C3FF;
			border: 10px #6FC solid;
			border-radius: 10px;
			position: fixed;
			top: 1em;
			height: 8em;
			width: 20em;
			overflow: hidden;
		}
		#buttons
		{
			right: 2em;
			width: 13em;
		}
		#buttons span
		{
			width: 50px;
			background: yellow;
			display: inline-block;
			border-radius:5px;
		}
		#buttons span[id]
		{
			width: 0px; margin-left:1em;
			background: black;
		}
		#tracks,#beat,#finale
		{
			height: 1400px;
			width: 100%;
			background-color: #F66;
			border-radius: 10px;
		}
		#beat { background-color: #66F; }
		#finale { background-color: #6F6; }
		.box
		{
			left: 500px;
			height: 500px;
			width: 100px;
			position: relative;
			border: 20px solid blue;
			border-radius: 5px;
			background:beige;
		}
/
		#beat .box{
			left: 450px;
			height: 200px;
		}
 */
	</style>
	<title>smoothFade/tracks</title>
</head>
<body>
<div id="musicStatus">
</div>
<!-- audio downloaded from http://mp3skull.com/mp3/smooth_beat.html  -->
<audio loop class="set1" id="soundTour3" src="1.mp3"></audio>
<audio loop class="set2" id="soundTour2" src="2.mp3"></audio>
<audio loop class="set1" id="soundTour4" src="3.mp3"></audio>
<audio loop class="set2" id="soundTour5" src="4.mp3"></audio>
<audio id="soundTour99" src="5.mp3"></audio>

<div id="buttons">
<button class="switch" id="set1">set 1</button>
<button class="switch" id="set2">set 2</button><br>
<span>track1:</span><span id="monitor_soundTour3"></span><br>
<span>track2:</span><span id="monitor_soundTour2"></span><br>
<span>smooth:</span><span id="monitor_soundTour4"></span><br>
<span>track3:</span><span id="monitor_soundTour5"></span><br>
<span>love it:</span><span id="monitor_soundTour99"></span><br><br>
</div>
<div id="tracks">
	<div class="float box">Floating Box</div>
</div>
<div id="beat">
	<div class="float box">Floating Box</div>
</div>
<div id="finale">
	<div class="float box">Floating Box</div>
</div>

</body>
</html>

<!-- Localized -->