javascript - Get current slide number when using bookblock.js? -
im working on online book children, , im using bookblock.js flip animations. im using popcorn.js provide audio when im on current slide , highlight words when audio playing. problem (and maybe stupid question - im kinda new in javascript world) dont know how current slide can autoplay appropriate audio file. managed attach audio file on each slide , play when clicking custom play button , pause when clicking custom pause button, want autoplay appropriate audio file when clicking on next button user don't have press play every time on new slide.
this main div have 2 more divs (bb-custom-side) in 1 (the right) have image, , in left bb-custom-side have 2 buttons (play/pause working should), have image (background) , 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 script part control next/previous/jump first/jump last slide using bookblock.js plugin 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, : 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 part manage sync audio text on current slide following (the following code 1 slide in case div containing audio 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 dont know if provided enough info code in short want know: there way me current slide bookblock.js (cause there current variable inside plugin dont know how , check it's status) or anywhere else can write if statement , autoplay right audio... tried declare variable counter increments upon config.$bookblock.bookblock('next') , decrement upon config.$bookblock.bookblock('prev') , check status example slide 2:
if( counter == 2 ) { // use popcorn script code appropriate audio } but reason won't work...
i tried solutions similar problems disscussed on stackoverflow like: how check element's visibility via javascript? get display status element effected .slidetoggle()? check if element visible on screen http://opensource.teamdf.com/visible/examples/demo-basic.html
so can check when div in viewport play audio reason wont work either...
any appreciated.
the plugin exposes callback when pageflip ends.
onendflip : function(old, page, islimit) { return false; }, // callback before flip transition // page current item´s index call audio code inside it. page should contain current page number.
page.init({ onendflip : function(old, page, islimit) { //your audio playing code goes here.. } });
Comments
Post a Comment