Get current slide number when using bookblock.js?
Im working on a online book for children, and im using bookblock.js for the flip animations. Also im using popcorn.js to provide audio when im on a current slide and highlight the words when the audio is playing. My problem is (and maybe its a stupid question - but im kinda new in the JavaScript world) that i dont know how to get the current slide so i can autoplay the appropriate audio file. I managed to attach an audio file on each slide and play it when clicking the custom play button and pause it when clicking the custom pause button, but now i also want to autoplay the appropriate audio file when clicking on the next button so the user don't have to press play every time he is on a new slide.
This is the main div where i have two more divs (bb-custom-side) where in one (the right) i have just an image, and in the left bb-custom-side i have 2 buttons (play/pause that are working as they should), i have an image (background) and a text.
<div class="bb-item" id="check3">
<div class="bb-custom-side">
<a class="play" id="play1" onclick="this.firstChild.play()"><audio class="audio" id="first_page" src="audio/FirstPage.mp3" preload="auto"/></a>
<a class="pause" id="pause1" onclick="document.getElementById('first_page').pause()"></a>
<img class="firstL" src="images/2L.png" />
<div class="textCont1" id="t1">
<span id="w1-1" class="word" data-start="0.40" >Еден</span>
<span id="w1-2" class="word" data-start="0.90">облачен</span></br>
<span id="w1-3" class="word" data-start="1.40">ден</span>
,
<span id="w1-4" class="word" data-start="2.15">Петар</span>
<span id="w1-5" class="word" data-start="2.55">и</span>
<span id="w1-6" class="word" data-start="2.70">неговата</span></br>
<span id="w1-7" class="word" data-start="7.0">мајка</span>
<span id="w1-8" class="word" data-start="8.0">отидоа</span>
<span id="w1-9" class="word" data-start="9.0">во</span>
<span id="w1-10" class="word" data-start="10.0">паркот</span>
.</br>
<span id="w1-11" class="word" data-start="11.0">Додека</span>
<span id="w1-12" class="word" data-start="12.0">мајка</span>
<span id="w1-13" class="word" data-start="13.0">му</span>
<span id="w1-14" class="word" data-start="14.0">плетеше</span></br>
<span id="w1-15" class="word" data-start="15.0">џемперче</span>
,
<span id="w1-16" class="word" data-start="16.0">Петар</span>
<span id="w1-17" class="word" data-start="17.0">се</span></br>
<span id="w1-18" class="word" data-start="18.0">лулаше</span>
<span id="w1-19" class="word" data-start="19.0">на</span>
<span id="w1-20" class="word" data-start="20.0">лулашкитe</span>
.</br>
<span id="w1-21" class="word" data-start="21.0">Таа</span>
<span id="w1-22" class="word" data-start="22.0">наскоро</span>
<span id="w1-23" class="word" data-start="23.0">ќе</span>
<span id="w1-24" class="word" data-start="24.0">роди</span>
<span id="w1-25" class="word" data-start="25.0">бебе</span>
,
<span id="w1-26" class="word" data-start="26.0">а</span></br>
<span id="w1-27" class="word" data-start="27.0">Петар</span>
<span id="w1-28" class="word" data-start="28.0">ќе</span>
<span id="w1-29" class="word" data-start="29.0">добие</span>
<span id="w1-30" class="word" data-start="30.0">братче</span>
<span id="w1-31" class="word" data-start="31.0">или</span></br>
<span id="w1-32" class="word" data-start="32.0">сестричка</span>
.</br>
</div>
</div>
<div class="bb-custom-side">
<img class="firstR" src="images/2R.png" />
</div>
</div>
Now the script part where i control the next/previous/jump to first/jump to last slide using the bookblock.js plugin is the following :
<script>
var Page = (function() {
var config = {
$bookBlock : $( '#bb-bookblock' ),
$navNext : $( '#bb-nav-next' ),
$navPrev : $( '#bb-nav-prev' ),
$navFirst : $( '#bb-nav-first' ),
$navLast : $( '#bb-nav-last' ),
},
init = function() {
config.$bookBlock.bookblock( {
speed : 1000,
shadowSides : 0.8,
shadowFlip : 0.4
} );
initEvents();
},
initEvents = function() {
var $slides = config.$bookBlock.children();
// add navigation events
config.$navNext.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'next' );
/////////////////////////////////////////////////////////////////
var allaudio = document.getElementsByClassName('audio');
for( var i=0; i<allaudio.length; i++)
{
allaudio[i].pause();
allaudio[i].src = allaudio[i].src;
}
/////////////////////////////////////////////////////////////////
return false;
} );
config.$navPrev.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'prev' );
/////////////////////////////////////////////////////////////////
var allaudio = document.getElementsByClassName('audio');
for( var i=0; i<allaudio.length; i++)
{
allaudio[i].pause();
allaudio[i].src = allaudio[i].src;
}
////////////////////////////////////////////////////////////////
return false;
} );
config.$navFirst.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'first' );
/////////////////////////////////////////////////////////////////
var allaudio = document.getElementsByClassName('audio');
for( var i=0; i<allaudio.length; i++)
{
allaudio[i].pause();
allaudio[i].src = allaudio[i].src;
}
/////////////////////////////////////////////////////////////////
return false;
} );
config.$navLast.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'last' );
/////////////////////////////////////////////////////////////////
var allaudio = document.getElementsByClassName('audio');
for( var i=0; i<allaudio.length; i++)
{
allaudio[i].pause();
allaudio[i].src = allaudio[i].src;
}
/////////////////////////////////////////////////////////////////
return false;
} );
// add swipe events
$slides.on( {
'swipeleft' : function( event ) {
config.$bookBlock.bookblock( 'next' );
/////////////////////////////////////////////////////////////////
var allaudio = document.getElementsByClassName('audio');
for( var i=0; i<allaudio.length; i++)
{
allaudio[i].pause();
allaudio[i].src = allaudio[i].src;
}
/////////////////////////////////////////////////////////////////
return false;
},
'swiperight' : function( event ) {
config.$bookBlock.bookblock( 'prev' );
/////////////////////////////////////////////////////////////////
var allaudio = document.getElementsByClassName('audio');
for( var i=0; i<allaudio.length; i++)
{
allaudio[i].pause();
allaudio[i].src = allaudio[i].src;
}
/////////////////////////////////////////////////////////////////
return false;
}
} );
// add keyboard events
$( document ).keydown( function(e) {
var keyCode = e.keyCode || e.which,
arrow = {
left : 37,
up : 38,
right : 39,
down : 40
};
switch (keyCode) {
case arrow.left:
config.$bookBlock.bookblock( 'prev' );
////////////////////////////////////////////////////////////////
var allaudio = document.getElementsByClassName('audio');
for( var i=0; i<allaudio.length; i++)
{
allaudio[i].pause();
allaudio[i].src = allaudio[i].src;
}
////////////////////////////////////////////////////////////////
break;
case arrow.right:
config.$bookBlock.bookblock( 'next' );
////////////////////////////////////////////////////////////////
var allaudio = document.getElementsByClassName('audio');
for( var i=0; i<allaudio.length; i++)
{
allaudio[i].pause();
allaudio[i].src = allaudio[i].src;
}
////////////////////////////////////////////////////////////////
break;
}
} );
};
return { init : init };
})();
</script>
<script>
Page.init();
</script>
And the part where i manage to sync audio with text on a current slide is the following (the following code is for one slide only in this case the div containing the audio with id="first_page" :
var pop = Popcorn("#first_page");
var wordTimes = {
"w1-1": { start: 0.55, end: 0.91 },
"w1-2": { start: 0.90, end: 1.55},
"w1-3": { start: 1.45, end: 2.25 },
"w1-4": { start: 2.00, end: 2.65 },
"w1-5": { start: 2.6, end: 2.80 },
"w1-6": { start: 2.72, end: 3.3 },
"w1-7": { start: 3.30, end: 3.77 },
"w1-8": { start: 3.77, end: 4.1 },
"w1-9": { start: 4.10, end: 4.24 },
"w1-10": { start: 4.24, end: 5.00 },
"w1-11": { start: 5.40, end: 6.06 },
"w1-12": { start: 6.06, end: 6.55 },
"w1-13": { start: 6.1, end: 6.56 },
"w1-14": { start: 6.56, end: 6.97 },
"w1-15": { start: 6.95, end: 7.75 },
"w1-16": { start: 8, end: 8.43 },
"w1-17": { start: 8.40, end: 8.66 },
"w1-18": { start: 8.60, end: 9.10 },
"w1-19": { start: 9.00, end: 9.24},
"w1-20": { start: 9.20, end: 10.11 },
"w1-21": { start: 10.92, end: 11.25 },
"w1-22": { start: 11.20, end: 11.70 },
"w1-23": { start: 11.60, end: 11.80 },
"w1-24": { start: 11.78, end: 12.15 },
"w1-25": { start: 12.11, end: 12.50 },
"w1-26": { start: 12.90, end: 13.20 },
"w1-27": { start: 13.15, end: 13.65 },
"w1-28": { start: 13.55, end: 13.75 },
"w1-29": { start: 13.70, end: 14.10 },
"w1-30": { start: 14.20, end: 14.65 },
"w1-31": { start: 14.57, end: 14.85 },
"w1-32": { start: 14.70, end: 15.50 }
};
$.each(wordTimes, function(id, time) {
pop.footnote({
start: time.start,
end: time.end,
text: '',
target: id,
effect: "applyclass",
applyclass: "selected"
});
});
pop.play();
$('.word').click(function() {
var audio = $('#first_page');
audio[0].currentTime = parseFloat($(this).data('start'), 10);
audio[0].play();
});
So i dont know if i provided enough info about the code but in short what i really want to know: is there a way for me to get the current slide from the bookblock.js (cause there is a CURRENT variable inside the plugin but i dont know how to get it and check it's status) or anywhere else so i can write an if statement and autoplay the right audio... I tried to declare a variable COUNTER that increments upon config.$bookBlock.bookblock('next') and decrement upon config.$bookBlock.bookblock('prev') and check its status for example for slide 2:
if( counter == 2 ) {
// use the popcorn script code with the appropriate audio }
but that for some reason won't work...
I also tried solutions for similar problems that were disscussed on StackOverflow like: How to check element's visibility via javascript? Get display status element effected by .slideToggle()? Check if element is visible on screen http://opensource.teamdf.com/visible/examples/demo-basic.html
so i can check when the div is in the Viewport to play the audio but for some reason that wont work either...
Any help will be greatly appreciated.
The Plugin exposes a callback for when the pageflip ends.
onEndFlip : function(old, page, isLimit) { return false; },
// callback before the flip transition
// page is the current item´s index
call your audio code inside it. page should contain the current page number.
Page.init({
onEndFlip : function(old, page, isLimit) {
//Your audio playing code goes here..
}
});
上一篇: jQuery当图像可见时，查看计数++