play audio once on scroll to position...

**wwfc** · 03-02-2014, 04:37 PM

hi...

i am stuck on something that is sooo near to working as i want it to...

i have a page that plays audio as you scroll from one div to another - the audio fades in / fades out depending on scoll position. it's working fine.
but.... i want each sound to play only once - not looping to the start of the sound as it is at the moment.

i've tried a few things but to no avail - it just keeps looping :-(

anyone see or tell me how to say to the js to play the sound when the div is reached and then once it plays once - stop the sound - until the next time the div is visited?

here is my code:

Code:

<!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 -->

i found this via https://forum.jquery.com/topic/jqery...io-file-fade-2

it is pretty much exactly what i want - but i don't want the sounds to keep looping while the div is active - just to play once per visit to the div

:-/

here's hoping...

**Foxman** · 03-02-2014, 07:58 PM

I need a pop up menu once on a webpage I click a link to read the page in a pop up window. When I click a link in POP up window I need a new pop up window to appear not losing the page I was on. Where di I get this?

**wwfc** · 03-03-2014, 06:33 PM

so, i take out the loop in
<audio loop class="set1" id="soundTour3" src="1.mp3"></audio>
and make it
<audio class="set1" id="soundTour3" src="1.mp3"></audio>

and it plays only once - which is great - but.... it makes all of the sounds play at once when the page is loaded...

how do i define the position of scroll (or div coming into viewport etc...) and then play the relevant sound???
:/

Thread: play audio once on scroll to position...

Thread Tools

Search Thread

play audio once on scroll to position...

Similar Threads

Execute function when play button is clicked in html5 audio player

Cannot play ra audio

Audio player is off position when I click play button

Record and Play Back Audio within Website

Resetting the scroll position after submit

Bookmarks

Bookmarks

Posting Permissions