Create js.php

js/js.php

@@ -0,0 +1,117 @@
+/* --------------------------------------------------*/
+/* -------------   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 vid = document.getElementById("speakera");
+    vid.addEventListener("timeupdate", function(){
+        updatePosition(this.currentTime);
+    });
+
+    // Listen for user to pause video.
+    vid.addEventListener("pause", function(){
+        $( '.movControl' ).html("&#9654"); // Change all bullets to "play".
+    });
+
+    // Listen for user to play video. ** i added this
+    vid.addEventListener("play", function(){
+        $( '.movControl' ).html("&#9632"); // Change all bullets to "stop".
+    });
+
+
+    // Click on utterance line.
+    $("body").on('click', 'span[name=utterance]',
+        function(event) {
+            var vid = document.getElementById("speakera");         
+
+            // 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('speakera').pause();
+                }, segmentDur);
+
+            }
+
+        }
+    );
+
+
+    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("&#9654;"); // Show "play" icon.
+    $ref.children(".movControl").removeClass("playing");
+}
+
+// Set $ref as playing.
+function isPlaying($ref) {
+    $ref.addClass('uttPlaying');
+    $ref.children(".movControl").html("&#9632;"); // 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.
+    }
+}