Get seek/progress time

[Anthony Gladdish]

Hi,

Using jPlayer, I would like to drag the play head to a new location on
the seek/progress bar and have it tell me the current time for that
position of the play head on mouse up/click ( this is so I can jump to
some relevant part of associated transcript text for the audio file
that is playing ).

I've tried binding to the seeking/progress events, and returning
"event.jPlayer.status.currentTime", to no avail.

The relevant jPlayer html is:

<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>

Could someone tell me how I might achieve this. There must be a way as
it's showing the play progress and end times ok.

I'm using the flash fallback in FF4/Chrome/IE8+.

Thanks,
Anthony

[daaa57150]

I think the event you want is 'seeked', which happens just after the
audio seeked so you have the opportunity to synchronize whatever you
want with the audio.
I hope I understood what you want correctly: you want to do something
like that, right?
http://yoyodyne.cc/h/

[Mark Panaghiston]

Anthony's first few posts got flagged as spam for some reason so that did not appear until I moderated them yesterday.

His other post, that I had replied to was on a similar topic:
https://groups.google.com/d/topic/jplayer/DmXr2DW82CI/discussion

Be careful using the seeked event. It behaves differently xbrowser. According to the spec, it should only be asserted after a seeking event has completed... But the seeking event should only be asserted if the media is not available at that point requested. Firefox seems to always give a seeking and seeked, even when the media is downloaded... iOS will give a seeked event when it is downloaded, but no seeking event. The Flash was made to follow the spec as close as possible, so its seeking and seeked events only assert if the media is still downloading. After the media is downloaded, the Flash will not give any seeking/seeked events.

The progress event relates to the media being downloaded.

The timeupdate event relates to the time point changing in the media being played.

The play and pause events might be useful... They tell you when the media starts playing and when it is paused. The events only occur if the state changes, so spamming the jPlayer play command 50 times will only generate 1 play event... Assuming it was paused when you issued them ;)

[Anthony Gladdish]

Hi Mark,

On Jun 20, 11:17 am, Mark Panaghiston <mark.panaghis...@gmail.com>
wrote:

I'm using FF3 with Flash.

Using the following code appears to work, clicking on the seek bar
jumps to the correct 20 second portion of transcript, but *only* if
the alert() box here is displayed!? If I comment the alert() box out
it does not work as desired ( i.e. it jumps forward in 20 second
intervals) :

$('div.jp-seek-bar').click(function(){
alert('jp-seek-bar: '+currentTime+', currentPercentRelative:
'+currentPercentRelative);

var counting = 1;
var count = 0;
while ( counting ) {
if ( count > currentTime ) {
counting = 0;
} else {
count = count + 20;
}
}
playerEn.jPlayer("play", count);
$('div.interview_ortho').scrollTo('span[m='+count+']');
$('#transcript span').removeClass('highlightTranscript');
$('#transcript span[m='+count+']').addClass('highlightTranscript');
return false;
});

I’m using the timeupdate event to save time information, i.e. :

playerEn.bind($.jPlayer.event.timeupdate, function(event) {
…
currentTime = event.jPlayer.status.currentTime;
…
});

Is this a bug or am I missing something obvious?

Note: the audio file downloads instantly on my network so I’m not
relying on seeked/seeking events.

Thanks for your help,
Anthony

[Anthony Gladdish]

I've created an example here so you can see the javascript I'm using:

http://research.ncl.ac.uk/decte/pilot/test2/

Thanks,
Anthony

[Mark Panaghiston]

I took a look at your code and you appear to have the whole process a little backwards... The timeupdate event should be driving the highlighting operation for the text. You do not need the click handlers on the play and seek bars at all.

Each time the timeupdate event occurs, the text to highlight should be calculated... Now this is not trivial... When we have done something like this in the past for a demonstration of modern browser technology, we used Popcorn to deal with the timing events.

This is the Radiolab demo we worked on for Mozilla Foundation:
http://hyper-audio.org/r/

The bottom of the 3 buttons on the right open the transcript display, where you can see the text being highlighted as the speaker talks. Basically, the timeupdate event is used inside Popcorn to determine which transcript events have happened or not already.. And they do it in a way so that they only need to check those since the last timeupdate event... That is Popcorn doing that bit for us. I then wrote a Popcorn plugin for the transcript.

Clicking on a word in the transcript simply tells jPlayer to jump to that time point.

Popcorn will only work on browsers that support media elements, as in <audio> or <video>. That masks a number of other requirements, so even using jPlayer with the emulateHTML patch (2.0.10) will not allow older browsers to work with Popcorn and jPlayer.
https://groups.google.com/d/msg/jplayer/rdWPvU4GpB8/7DE5heg8-fIJ

If you want to make your solution to work with jPlayer on older browsers, you will need to write your own code for the timing event processing. You could use some of the popcorn code for this, but the whole code is not suitable for older browsers. The have no plans to make it work on old browsers either.

[Anthony Gladdish]

Hi Mark,

On Tuesday, 21 June 2011 14:29:08 UTC+1, Mark Panaghiston wrote:

I took a look at your code and you appear to have the whole process a little backwards... The timeupdate event should be driving the highlighting operation for the text. You do not need the click handlers on the play and seek bars at all.

Each time the timeupdate event occurs, the text to highlight should be calculated... Now this is not trivial...

Ah that's resolved it!

I've set up a global var:

    var seekClicked = 0;

... and referenced it thus:

    $('div.jp-seek-bar').click(function(){
        seekClicked = 1;       
        return false;
    });   
    $('div.jp-play-bar').click(function(){       
        seekClicked = 1;
        return false;
    });

... then control it, as you suggested, in the timeupdate event instead, resetting seekClicked after we've jumped to the correct part of the transcript:

    playerEn.bind($.jPlayer.event.timeupdate, function(event) {       
        currentTime = event.jPlayer.status.currentTime;   

        if ( seekClicked ) {

            var counting = 1;
            var count = 0;
            while ( counting ) {
                if ( count > currentTime ) {

                    count = count - 20; // get to the start of the 20 sec interval.

                    counting = 0;
                } else {
                    count = count + 20;
                }
            }       
            playerEn.jPlayer("play", count);
            $('div.interview_ortho').scrollTo('span[m='+count+']');       
            $('#transcript span').removeClass('highlightTranscript');
            $('#transcript span[m='+count+']').addClass('highlightTranscript');   

            // reset:
            seekClicked = 0;
        }
    });

Our requirement is to have the text interactive and manually searchable while the audio is playing without it scrolling ( as there's other interactivty we'll be building in ), otherwise we would have opted to just scroll the transcript text with the audio.

But thanks very much for pointing me in the right direction though, much appreciated :)

Anthony