私は個人的なHTML5/ CSS3プロジェクトに取り組んでいます。このプロジェクトでは、1970年代の古いスーパーヒーローの読み聞かせの本を取り、互換性のあるブラウザー（Safari / Chrome / Firefox）で記録して再生します。コミックパネルは、視聴者がボタンを押して先にスキップしたり戻ったりできるようにしながら、自動的にオーディオトラックと歩調を合わせます。
これを実現するために、FancyBox2を使用して画像を処理し、BuzzJavascriptオーディオライブラリを使用してHTML5オーディオ機能を処理し、カスタムjQueryとJavascriptを使用してロジックを処理しています。
Buzz JavaScriptライブラリを使用すると、再生中のオーディオを監視し、FancyBoxギャラリーの各画像にタグを割り当てることができます。音声が再生されると、適切な時間に対応するタグに到達するたびに、画像ギャラリーが前方に移動します。
オーディオを再生し、コミックをそれに合わせさせると、自動的に正常に機能します。ギャラリーのFancyBoxの[次へ]ボタンを使用して先にスキップすることもできます。私が抱えている問題は、前のボタンを押してオーディオとギャラリーをスキップして戻ると、現在のデータスタンプが後方に移動せず、Fancyboxがスパンデータスタンプに追いつくまでギャラリー内で前方に移動しないことです。トリガーされていないタイムコード。
私のコメントしたコードは以下のとおりです。これはhttp://powerrecords.pixelwhip.com/story_manWolf_finalCode.htmlで実際に表示できます。ファイアバグや開発者ウィンドウなどで変数やタイムスタンプを追跡できるように、コンソールメッセージを有効のままにしておきました。私はこれに数週間立ち往生しているので、どんな助けでも大歓迎です。
<!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>