Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

522 lines (361 sloc) 13.465 kb
<!DOCTYPE html>
<!-- BEGIN html -->
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<!-- Based on an Orman Clark design (http://www.premiumpixels.com) -->
<!-- BEGIN head -->
<head>
<!-- Meta Tags -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Title -->
<title>Hyperaudio An Introduction</title>
<!-- Stylesheets -->
<!--<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Serif:regular,italic,bold,bolditalic" type="text/css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" type="text/css" /> -->
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" media="all" href="scrollpane.css" />
<!-- Magick -->
<!-- Move jQuery Local! -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.js"></script>
<script type="text/javascript" src="js/popcorn.js"></script>
<script type="text/javascript" src="js/popcorn.transcript.js"></script>
<script type="text/javascript" src="js/jscrollpane.js"></script>
<script type="text/javascript" src="js/jquery.bbq.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var theScript = [];
var audioDir = "audio";
var transcriptDir = "transcripts";
console.log('start');
// Grab the script from the URL
theScript = $.bbq.getState();
console.dir(theScript);
var theScriptLength = theScript.length;
//console.log(theScript[0].m);
//console.log(theScriptLength);
//console.log(theScript.length);
//console.log(theScript[0].m);
var i = 0;
if (theScript[i] != false) {
console.log('here');
while (theScript[i] != undefined) {
loadFile(theScript[i].m);
// We need to paste the appropriate parts in the target pane here
console.log($('#transcript-content').find('span').attr('m',theScript[i].s));
//while (theScript
//$('#target-content').append();
i++;
}
} else {
theScript = [];
}
var myPlayer = $("#jquery_jplayer_1");
myPlayer.jPlayer({
ready: function (event) {
if(event.jPlayer.html.used && event.jPlayer.html.audio.available) {
//initPopcorn('#' + $(this).data("jPlayer").internal.audio.id);
}
},
solution: "html, flash",
swfPath: "js",
supplied: "mp3,oga",
preload: "auto"
//errorAlerts: "true",
//warningAlerts: "true"
});
// These events are fired as play time increments
var playingWord = 1;
// transcript links to audio
$('#transcript').delegate('span','click',function(){
var jumpTo = $(this).attr('m')/1000;
console.log('playing from '+jumpTo);
myPlayer.jPlayer("play",jumpTo);
return false;
});
var index = "";
var filename = "";
var end = "";
var start = "";
var mediaId = "";
$('#target-content').delegate('span','click',function(){
var jumpTo = $(this).attr('m')/1000;
index = $(this).parent().attr('i');
console.log("The Script");
console.dir(theScript);
console.log("....");
//src = theScript[index].src;
//console.log("Src = "+src);
mediaId = theScript[index].m;
var audiomp3 = audioDir+"/"+mediaId+".mp3";
var audioogg = audioDir+"/"+mediaId+".ogg";
myPlayer.jPlayer("setMedia", {
mp3: audiomp3,
oga: audioogg
});
console.log('playing from .......'+jumpTo);
//myPlayer.jPlayer("pause");
myPlayer.jPlayer("play",jumpTo);
filename = $(this).parent().attr('f');
end = $(this).parent().attr('e');
start = $(this).parent().attr('s');
index = $(this).parent().attr('i');
return false;
});
myPlayer.bind($.jPlayer.event.ended, function() {
//
});
/* hyperaudiopad stuff */
/* load in the file */
function initPopcorn(id) {
var p = Popcorn(id)
.code({
start: 0,
end: 2000,
onStart: function (options) {
console.log('start')
},
onFrame: (function () {
var count = 0;
return function (options) {
var now = this.Popcorn.instances[0].media.currentTime*1000;
/*console.log('now = '+now);
console.log('start = '+start);
console.log('end = '+end);
console.log('index = '+index); */
var src = "";
if (now > end && theScript.length > 0) {
myPlayer.jPlayer("pause");
//console.log("length="+theScript.length);
//console.log("index="+index);
index = parseInt(index);
if (theScript.length > (index+1)) {
index = index + 1;
// end of the script
console.log('switcherooo.............................');
console.log(index);
//src = theScript[index].src;
start = theScript[index].s;
end = theScript[index].e;
mediaId = theScript[index].m;
console.log('src = '+src);
/*var audiomp3 = src.replace('.mp3','').replace('.ogg','')+'.mp3';
var audioogg = src.replace('.mp3','').replace('.ogg','')+'.ogg';*/
var audiomp3 = audioDir+"/"+mediaId+".mp3";
var audioogg = audioDir+"/"+mediaId+".ogg";
myPlayer.jPlayer("setMedia", {
mp3: audiomp3,
oga: audioogg
});
myPlayer.jPlayer("pause",3);
myPlayer.jPlayer("play",start/1000);
}
}
}
})(),
onEnd: function (options) {
console.log('end');
}
});
$("#transcript-content span").each(function(i) {
p.transcript({
time: $(this).attr("m") / 1000, // seconds
futureClass: "transcript-grey",
target: this
});
});
};
$('.transcript-file').live('click',function(){
var id = $(this).attr('href');
$('#script-title').text($(this).text());
loadFile(id);
return false;
});
function loadFile(id) {
var file = transcriptDir+'/'+id;
var audioogg = audioDir+'/'+id+'.ogg';
var audiomp3 = audioDir+'/'+id+'.mp3';
console.log('file = '+audioogg);
$('#transcript-content').load(file, function() {
//load success!!!
initPopcorn('#' + myPlayer.data("jPlayer").internal.audio.id);
// load in the audio
myPlayer.jPlayer("setMedia", {
mp3: audiomp3,
oga: audioogg
});
$.data(myPlayer,'mediaId',id);
$('.scroll-pane').jScrollPane();
});
}
// select text function
function getSelText()
{
var txt = '';
if (window.getSelection){
txt = window.getSelection();
}
else if (document.getSelection){
txt = document.getSelection();
}
else if (document.selection){
txt = document.selection.createRange().text;
}
return txt;
}
// Sets the excerpt
$('#transcript-content').mouseup(function(e){
var select = getSelText();
var tweetable = select+"";
var startSpan = select.anchorNode.nextSibling;
if (startSpan == null) {
startSpan = select.anchorNode.parentNode;
}
var endSpan = select.focusNode.nextSibling;
if (endSpan == null) {
endSpan = select.focusNode.parentNode.nextElementSibling;
if (endSpan == null) {
endSpan = select.focusNode.parentNode;
}
}
console.log('start span ..... ');
console.dir(startSpan);
console.log('start span');
console.log(startSpan);
console.log('--------');
console.log('end span ..... ');
console.dir(endSpan);
console.log('end span');
console.log(endSpan);
console.log('--------');
// if either are null we have a problem basically, a problem that should be solved
if (startSpan != null && endSpan != null) {
// Flip if end time is less than start time (ie the text was selected backwards)
var startTime = parseInt(startSpan.getAttribute('m'));
var endTime = parseInt(endSpan.getAttribute('m'));
console.log('startTime');
console.log(startTime);
console.log('--------');
console.log('endTime');
console.log(endTime);
console.log('--------');
var tempSpan = endSpan;
var tempTime = endTime;
if (endTime < startTime) {
endSpan = startSpan;
endTime = startTime;
startSpan = tempSpan;
startTime = tempTime;
}
// check for single word click
if (getNextNode(startSpan,true,endSpan) != endSpan) {
/*console.log('startspan');
console.log(startSpan);
console.log('--------');
console.log('endspan');
console.log(endSpan);
console.log('--------'); */
var nextSpan = startSpan;
// $('#target-content').append('<p s="'+startTime+'" e="'+endTime+'" f="'+myPlayer.data('jPlayer').status.src+'">');
var selectedStuff = $('<p i="'+theScript.length+'" s="'+startTime+'" e="'+endTime+'" f="'+myPlayer.data('jPlayer').status.src+'">');
$('#target-content').append( selectedStuff );
while(nextSpan != endSpan) {
console.log('nextspan');
console.log(nextSpan);
// $(nextSpan).clone().appendTo('#target-content');
$(nextSpan).clone().appendTo(selectedStuff);
// $(' ').appendTo(selectedStuff);
selectedStuff.append(' ');
//$('#target-content').append(' ');
nextSpan = getNextNode(nextSpan,true,endSpan);
}
$('#target-content').append('</p>');
var timespan = {};
timespan.s = startTime;
timespan.e = endTime;
timespan.m = $.data(myPlayer,'mediaId');
//console.log(myPlayer.data('jPlayer').status.src);
//timespan.src = myPlayer.data('jPlayer').status.src;
theScript.push(timespan);
$.bbq.pushState(theScript);
console.dir(theScript);
}
}
});
var getNextNode = function(node, skipChildren, endNode){
//if there are child nodes and we didn't come from a child node
if (endNode == node) {
return null;
}
if (node.firstChild && !skipChildren) {
return node.firstChild;
}
if (!node.parentNode){
return null;
}
return node.nextElementSibling
|| getNextNode(node.parentNode, true, endNode);
//return node.nextSibling
//|| getNextNode(node.parentNode, true, endNode);
};
$('#instructions-btn').click(function(){
if($('#instructions').is(':visible')){
$('#instructions').fadeOut();
} else {
$('#instructions').fadeIn();
}
return false;
});
});
</script>
<!-- END head -->
</head>
<!-- BEGIN body -->
<body class="single single-post postid-4004 gecko layout-2cr">
<div id="container">
<div id="header" class="clearfix">
<div id="title">
<div id="instructions" style="position:fixed;margin-top:36px;margin-left:160px;z-index:1000;opacity: 0.9;display:none">
<p>1. Select transcripts from the right hand pane.</p>
<p>2. Transcripts will appear in the centre pane.</p>
<p>3. Highlighted text in the centre pain will appear in the 'Mash-up' pane on the right hand side.</p>
<p>4. Transcripts can be navigated and played by clicking on the text.</p>
</div>
<h1>Hyperaudio Pad</h1>
<div id="accordion">
<h2><a id="instructions-btn" href="#">Instructions</a></h2>
</div>
</div><!--END #title-->
</div><!--END #header-->
<div id="content">
<div id="sidebar">
<ul><li><a id="home" href="index.htm">✪ home</a></li></ul>
<!-- player -->
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="player">
<ul class="jp-controls">
<li><a href="#" class="jp-play" tabindex="1">play</a></li>
<li><a href="#" class="jp-pause" style="display:none;" tabindex="1">pause</a></li>
</ul>
</div>
<!-- transcript loader -->
<ul>
<li><a class="transcript-file" href="nitotmozilla-m" >Nitot on Firefox</a></li>
<li><a class="transcript-file" href="mbjkaudio" >HTML5 Audio</a></li>
<li><a class="transcript-file" href="" >Transcript 3</a><br/></li>
</ul>
</div><!-- end #sidebar -->
<h2 id="script-title" class="entry-title"></h2>
<div id="transcript-hldr" class="scroll-pane">
<div id="transcript" class="entry-content">
<div id="transcript-content">
</div>
</div>
</div>
<div id="mashup" class="scroll-pane">
<div id="target-content" contenteditable="true">
</div><!-- end #target-content -->
</div><!-- end #mashup -->
</div><!-- end #content -->
</div><!-- end #container -->
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.