js/js.php

/* --------------------------------------------------*/
/* -------------   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.
    }
}