PDA

View Full Version : 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:


<!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-html5-audio-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...

:rolleyes:

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???
:/