我正在开发一个个人 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>