个人中心
gpt4 book ai didi

javascript - 使用 bookblock.js 时获取当前幻灯片编号？

转载 作者：太空宇宙 更新时间：2023-11-04 13:17:49 26 4
gpt4 key购买 nike

我正在为 child 制作一本在线书籍，我正在使用 bookblock.js 制作翻页动画。当我在当前幻灯片上时，我还使用 popcorn.js 提供音频，并在播放音频时突出显示单词。我的问题是(也许这是一个愚蠢的问题 - 但我在 JavaScript 世界中有点新)我不知道如何获取当前幻灯片以便我可以自动播放适当的音频文件。我设法在每张幻灯片上附加一个音频文件并在单击自定义播放按钮时播放它并在单击自定义暂停按钮时暂停它，但现在我还想在单击下一个按钮时自动播放适当的音频文件以便用户不要每次他在新幻灯片上时都必须按播放键。

这是主 div，我还有两个 div(bb-custom-side)，其中一个(右侧)我只有一张图片，而在左侧 bb-custom-side 我有 2 个按钮(播放/暂停正常工作)，我有一个图像(背景)和一个文本。

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

现在，我使用 bookblock.js 插件控制下一张/上一张/跳转到第一张/跳转到最后一张幻灯片的脚本部分如下:

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

我设法将音频与当前幻灯片上的文本同步的部分如下(以下代码仅适用于一张幻灯片，在这种情况下，包含 id="first_page"的音频的 div :

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();
        });

所以我不知道我是否提供了足够的代码信息，但简而言之，我真正想知道的是:有没有办法让我从 bookblock.js 获取当前幻灯片(因为里面有一个 CURRENT 变量插件，但我不知道如何获取它并检查它的状态)或其他任何地方，所以我可以编写一个 if 语句并自动播放正确的音频......我试图声明一个变量 COUNTER，它在 config.$bookBlock.bookblock('next') 上递增并在 config.$bookBlock.bookblock('prev') 上递减，并检查其状态，例如幻灯片 2:

    if( counter == 2 ) {
// use the popcorn script code with the appropriate audio }

但出于某种原因，这是行不通的...

我还尝试了针对在 StackOverflow 上讨论过的类似问题的解决方案，例如: 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

所以我可以检查 div 何时在视口(viewport)中以播放音频，但由于某些原因也无法正常工作...

任何帮助将不胜感激。

最佳答案

插件公开了翻页结束时的回调。

    onEndFlip : function(old, page, isLimit) { return false; },
    // callback before the flip transition
    // page is the current item´s index

在其中调用您的音频代码。页面应包含当前页码。

Page.init({
    onEndFlip : function(old, page, isLimit) {
        //Your audio playing code goes here..
    }
});

关于javascript - 使用 bookblock.js 时获取当前幻灯片编号？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22894405/

26 4 0
文章推荐： Python urllib,urllib2 填表
文章推荐： html - 图像的 CSS 对齐问题
文章推荐： css - 如何使此背景图像成为流畅的动画
文章推荐： Javascript 无法读取未定义的属性 'document'
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com