我正在开发一个个人HTML 5 / CSS3项目，该项目采用1970年代的超级英雄阅读书并记录并在兼容的浏览器（Safari / Chrome / FireFox）中播放。漫画面板自动跟踪音轨，同时允许观众按下按钮向前跳过或按原样返回。
为了实现这一目标，我使用FancyBox2处理图像和Buzz Javascript音频库来处理HTML 5音频功能，并使用一些自定义jQuery和Javascript来处理逻辑。
Buzz JavaScript库允许我在播放时监听音频，并为FancyBox库中的每个图像分配标签。当音频播放时，每次它到达对应于适当时间的标签时，图库就会向前移动。
播放音频并让漫画与它保持同步自动运行正常。使用库中的FancyBox下一个按钮向前跳过也很有效。我遇到的问题是，当我按下上一个按钮跳过音频和图库时，当前数据标记不会向后移动，Fancybox将不会在图库中向前移动，直到它赶上跨度数据标记尚未触发的时间码。
我的评论代码如下，您可以在http://powerrecords.pixelwhip.com/story_manWolf_finalCode.html查看此操作。我已经启用了控制台消息，以便您可以在firebug或开发人员窗口中跟踪变量和时间戳，或者您有什么。我已经坚持了几个星期，所以任何帮助都会非常感激。
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>The Power Records Project</title>
<!-- Import the latest jQuery library from Google-->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Import the Buzz Javascript Audio library -->
<script type="text/javascript"
src="scripts/buzz.js" language="javascript"></script>
<!-- Import the FancyBox Gallery library -->
<script type="text/javascript"
src="scripts/jquery.fancybox.js"></script>
<!-- Import the jQuery Data Selector Extension-->
<script src="scripts/jquery.dataSelector.js"></script>
<!-- Initialize FancyBox2 -->
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<script language="javascript" type="text/javascript">
// Check to make sure that the browser supports HTML5, and therefore,
// the Buzz javascript library (imported above)
if (!buzz.isSupported()) {
alert("The Power Records Project relies on Javascript,
HTML5 and CSS3 to work. Please update your browser
and come back!");
}
// Create the new Sound object - Spider-Man: Mark of the Man-Wolf
var smManWolf = new buzz.sound("audio/sm_MarkManWolf", {
formats: [ "ogg", "mp3" ],
preload: true,
autoload: true,
loop: false
});
// Create an array that holds the time marks, in seconds, that queues
// new panel rows in the gallery
var audioMarks = new Array();
audioMarks[0] = 0;
audioMarks[1] = 30;
audioMarks[2] = 49;
audioMarks[3] = 66;
audioMarks[4] = 88;
audioMarks[5] = 103;
// Declare a variable that gets the length of the audioMarks array
// (just in case I need it)
var lengthOfArray = audioMarks.length;
// Declare a variable called currentMark and set to 0 -- the beginning
// of the audio program. This var will be used to update the timecode
// each time the user skips forward and backward
var currentMark = audioMarks[0] ;
var i = 0;
var nextAudioButtonHit = false;
var prevAudioButtonHit = false;
// Function that tells Fancybox to go to the next panel set in the gallery
var nextPanel = function () {
$.fancybox.next();
};
// Function that tells Fancybox to go to the previous panel set in the gallery
var prevPanel = function () {
$.fancybox.prev();
};
// When the FancyBox forward gallery button is pressed, tell the audio
// to go to the next audioMark in the array
var nextAudio = function() {
nextAudioButtonHit = true;
i++;
currentMark = audioMarks[i];
smManWolf.setTime(currentMark);
console.log("NEXT NAV BUTTON HIT! i is now equal to " + i);
console.log("The nextAudioButtonHit value is "+ nextAudioButtonHit);
console.log("The next audio button currentMark is "+ currentMark);
};
// When the FancyBox backward gallery button is pressed, tell the audio
// to go to the previous audioMark in the array
var previousAudio = function() {
prevAudioButtonHit = true;
i--;
currentMark = audioMarks[i];
smManWolf.setTime(currentMark);
console.log("PREV NAV BUTTON HIT! i is now equal to " + i);
console.log("The prevAudioButtonHit value is "+ prevAudioButtonHit);
console.log("The previous audio button currentMark is "+ currentMark);
};
// Autoplay function - the images in the gallery will keep up with the audio
// automatically once the user starts the story.
var autoPlay = function() {
// Begin playing the audio file
smManWolf.play();
// The Buzz Audio Library repeating timer function that monitors
// the audio file, tracks the time and handles the artwork upkeep
smManWolf.bind('timeupdate', function(e) {
var theTime = buzz.toTimer(this.getTime());
$('.timer').html(theTime);
$('span:data("stamp='+theTime+'")').each(function() {
// only do the animation once
if (theTime=="00:00") {
i=0;
currentMark=audioMarks[0];
console.log("The timer just hit "+ theTime);
console.log("The currentMark is "+ currentMark);
console.log("i is equal to " + i);
}
// If the <span data-stamp> time has
else if ( !$(this).data('triggered') && nextAudioButtonHit == false ) {
$(this).data('triggered', true);
nextPanel();
i++;
currentMark = audioMarks[i];
console.log("The nextAudioButtonHit value is "
+ nextAudioButtonHit);
console.log("The timer just hit "+ theTime);
console.log("The currentMark is "+ currentMark);
console.log("i is equal to " + i);
}
else if ( !$(this).data('triggered') && nextAudioButtonHit == true ) {
$(this).data('triggered', true);
nextPanel();
currentMark = audioMarks[i];
nextAudioButtonHit = false;
console.log("The nextAudioButtonHit value is "
+ nextAudioButtonHit);
console.log("The timer just hit "+ theTime);
console.log("The currentMark is "+ currentMark);
console.log("i is equal to " + i);
}
// HERE IS THE PROBLEM: Whenever the Previous Gallery button is hit,
// the current data stamp does not move backward with the vars i and
// currentMark. Fancybox will not move forward in the gallery until it
// catches up to a span data-stamp timecode that has not been triggered.
// REVERSING THE Not (!) and TRUE/FALSE CONDITIONS DOES NOT WORK:
/*
if ( $(this).data('triggered') && nextAudioButtonHit == false ) {
$(this).data('triggered', false);
*/
else if (prevAudioButtonHit == true) {
currentMark = audioMarks[i];
prevAudioButtonHit = false;
console.log("THE PREVIOUS BUTTON TIMER FUNCTION IS FIRING");
console.log("The prevAudioButtonHit value is "
+ prevAudioButtonHit);
console.log("The timer just hit "+ theTime);
console.log("The currentMark is "+ currentMark);
console.log("i is equal to " + i);
}
});
});
};
$(document).ready(function() {
$(".controlButtons").fancybox({
autoPlay : false,
closeBtn : false,
helpers : {
title : { type : 'inside' },
buttons : {}
}
});
});
</script>
<script type="text/javascript"
src="scripts/jquery.fancybox-buttons.js?v=2.0.5"></script>
<!-- Link to the style sheets -->
<link rel="stylesheet" href="jquery.fancybox.css?v=2.0.5"
type="text/css" media="screen" />
<link rel="stylesheet" href="jquery.fancybox-buttons.css?v=2.0.5"
type="text/css" media="screen" />
<link href="styles.css" rel="stylesheet"
type="text/css" charset="utf-8">
</head>
<body>
<div id="container">
<li>PLEASE WAIT SEVERAL SECONDS FOR IMAGES TO PRELOAD then <a class="fancybox"
href="#inline1" title="Lorem ipsum dolor sit amet">click here to Open the
Book</a></li>
<div id="inline1" style="width:700px;display: none;">
<a class="controlButtons" href="images/smManWolf/0.jpg"
data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"
onclick = "autoPlay();"><span data-stamp="00:00">BEGIN THE STORY</span></a>
<a class="controlButtons" href="images/smManWolf/1.jpg"
data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet">
<span data-stamp="00:30"> </span></a>
<a class="controlButtons" href="images/smManWolf/2.jpg"
data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet">
<span data-stamp="00:49"> </span></a>
<a class="controlButtons" href="images/smManWolf/3.jpg"
data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet">
<span data-stamp="01:06"> </span></a>
<a class="controlButtons" href="images/smManWolf/4.jpg"
data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet">
<span data-stamp="01:28"> </span></a>
<a class="controlButtons" href="images/smManWolf/5.jpg"
data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet">
<span data-stamp="01:43"> </span></a>
<a class="controlButtons" href="images/smManWolf/6.jpg"
data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet">
<span data-stamp="02:02"> </span></a>
<!--END inline div --></div>
<!--END container div --></div>
</body>
</html>