Spaces:
Running
Running
File size: 5,227 Bytes
3a1d650 e679c06 3a1d650 e679c06 3a1d650 e679c06 3a1d650 7206f54 3a1d650 473a9ad 3a1d650 131b229 3a1d650 035dcc0 3a1d650 338bf4e 3a1d650 338bf4e 3a1d650 338bf4e 3a1d650 338bf4e 3a1d650 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 |
/* --------------------------------------------------*/
/* ------------- MEDIA PLAYBACK ----------------- */
/* ---------------------https://web.archive.org/web/20220121094229/ */
/* https://childes.talkbank.org/browser/index.php?url=Eng-UK/MPI-EVA-Manchester/Eleanor/020006b.cha */
/*-----------------------------*/
$(function (){
// Add "timeupdate" listener to "#speakera".
var vida = document.getElementById("speakera");
vida.addEventListener("timeupdate", function(){
updatePosition(this.currentTime);
});
// Listen for user to pause video.
vida.addEventListener("pause", function(){
$( '.movControla' ).html("▶"); // Change all bullets to "play".
});
// Listen for user to play video. ** i added this
vida.addEventListener("play", function(){
$( '.movControla' ).html("◼"); // Change all bullets to "stop".
});
// Add "timeupdate" listener to "#speakera".
var vidb = document.getElementById("speakerb");
vidb.addEventListener("timeupdate", function(){
updatePosition(this.currentTime);
});
// Listen for user to pause video.
vidb.addEventListener("pause", function(){
$( '.movControlb' ).html("▶"); // Change all bullets to "play".
});
// Listen for user to play video. ** i added this
vidb.addEventListener("play", function(){
$( '.movControlb' ).html("◼"); // Change all bullets to "stop".
});
// Click on utterance line.
$("body").on('click', 'span[name=utterance]',
function(event) {
//var vid = document.getElementById("speakera");
var vid = document.getElementById( $(this).attr("audiolink") );
// If user clicked "stop" on a playing line, pause video, remove ".playing", change icon to "play".
if(!vid.paused) {
vid.pause();
}
else {
var newTime = $(this).attr("beg");
vid.currentTime = newTime / 1000;
// currentTime needs to be in SEC
vid.play();
var segmentDur = $(this).attr("end") - newTime
// segmentDur needs to be in MS
setTimeout(function(){
//document.getElementById( $(this).attr("audiolink") ).pause();
vid.pause();
}, segmentDur);
}
}
);
// alt-click on utterance line and only play it, then automatically stop
$("body").on('contextmenu', 'span[name=utterance]',
function(event) {
//var vid = document.getElementById("speakera");
//var vid = document.getElementById( $(this).attr("audiolink") );
// If they are not already playing both videos
if((vida.paused) || (vidb.paused)) {
var newTime = $(this).attr("beg");
vida.currentTime = newTime / 1000;
vida.play();
vidb.currentTime = newTime / 1000;
vidb.play();
// currentTime needs to be in SEC
}
// if both videos were already playing
else {
vida.pause();
vidb.pause();
}
}
);
getIntervals();
});
// Create "intervals[]" from each <span name="utterance"> using its beg/end to get the begin/end times.
var intervals = [];
function getIntervals() {
$( 'span[name=utterance]' ).each(function( index ) {
intervals.push({"begin": $( this ).prop('beg'), "end": $( this ).prop('end')});
});
}
// Set $ref as not playing.
function notPlaying($ref) {
$ref.removeClass('uttPlaying');
$ref.children(".movControl").html("▶"); // Show "play" icon.
$ref.children(".movControl").removeClass("playing");
}
// Set $ref as playing.
function isPlaying($ref) {
$ref.addClass('uttPlaying');
$ref.children(".movControl").html("◼"); // Show "stop" icon.
$ref.children(".movControl").addClass("playing");
}
/*
// Returns true if $elem is beyond the current scrolled view.
function isScrolledOutOfView($elem) {
var $window = $(window);
var windowTop = $window.scrollTop();
var windowBottom = windowTop + $window.height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
return ((elemBottom > windowBottom) || (elemTop < windowTop));
} */
// Callback function for timeupdate event.
function updatePosition( currentTime ) {
var msTime = currentTime * 1000;
for ( c = 0; c < intervals.length; c++ ) {
if ((msTime >= intervals[c].begin) && (msTime < intervals[c].end)) {
notPlaying($( 'span[name=utterance]' )); // Mark everything as "not playing".
isPlaying($( '#' + intervals[c].begin )); // Mark line corresponding to currentTime as "playing".
/* // Auto-scroll if playing line is out of view.
if (isScrolledOutOfView($('.playing'))) {
$('html, body').animate({
scrollTop: ($(".playing").offset().top - ($(window).height() / 2))
}, 500);
} */
}
//$( 'span[name=utterance]' ).removeClass('uttPlaying'); // No interval defined at currentTime.
}
}
|