【发布时间】：2014-05-18 15:11:13
【问题描述】：
我正在为儿童编写在线书籍，并且我正在使用 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>
我设法将音频与当前幻灯片上的文本同步的部分如下（以下代码仅适用于一张幻灯片，在这种情况下，div 包含 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();
});
所以我不知道我是否提供了有关代码的足够信息，但简而言之，我真正想知道的是：有没有办法让我从 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 何时在视口中播放音频，但由于某种原因也无法正常工作......
任何帮助将不胜感激。
【问题讨论】：
标签： javascript jquery html plugins slide