I am working on a personal HTML 5/CSS3 project that takes the old 1970's super hero read-along book and records and plays them in a compatible browser (Safari/Chrome/FireFox). The comic panels keep pace with the audio track automatically on their own, while allowing the viewer to press a button to skip ahead or go back as they will.
To accomplish this, I'm using FancyBox2 to handle the images and the Buzz Javascript audio library to handle the HTML 5 audio capability, with some custom jQuery and Javascript to handle the logic.
The Buzz JavaScript library allows me to monitor the audio as it plays and assign a tag to each image in the FancyBox gallery. As the audio plays, each time it reaches a tag that corresponds to the appropriate time, the image gallery moves forward.
Playing the audio and having the comic keep pace with it automatically works fine. Skipping ahead using the FancyBox next button in the gallery also works well. The problem I am having is that when I hit the previous button to skip back in the audio and the gallery, the current data stamp does not move backward and Fancybox will not move forward in the gallery until it catches up to a span data-stamp timecode that has not been triggered.
My commented code is below and you can view this in action at http://powerrecords.pixelwhip.com/story_manWolf_finalCode.html . I have left console messages enabled so that you can track variables and timestamps in firebug or the developer window or what have you. I've been stuck on this for a few weeks, so any help would be greatly appreciated.
<!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>