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 vida = document.getElementById("speakera");
    vida.addEventListener("timeupdate", function(){
        updatePosition(this.currentTime);
    });

    // Listen for user to pause video.
    vida.addEventListener("pause", function(){
        $( '.movControla' ).html("&#9654"); // Change all bullets to "play".
    });

    // Listen for user to play video. ** i added this
    vida.addEventListener("play", function(){
        $( '.movControla' ).html("&#9724"); // 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("&#9654"); // Change all bullets to "play".
    });

    // Listen for user to play video. ** i added this
    vidb.addEventListener("play", function(){
        $( '.movControlb' ).html("&#9724"); // 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("&#9654;"); // Show "play" icon.
    $ref.children(".movControl").removeClass("playing");
}

// Set $ref as playing.
function isPlaying($ref) {
    $ref.addClass('uttPlaying');
    $ref.children(".movControl").html("&#9724;"); // 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.
    }
}