Hugging Face's logo

Spaces:
clr
/
spjall
Running

App Files Community
1
spjall
File size: 4,401 Bytes 
3a1d650
 
 
 
 
 
 
 
e679c06
 
3a1d650
 
 
 
e679c06
 
3a1d650
 
 
e679c06
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3a1d650
 
 
 
 
 
7206f54
 
3a1d650
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e679c06
3a1d650
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
035dcc0
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
 
/* --------------------------------------------------*/
/* -------------   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();
                }, 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("&#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.
    }
}