Skip to main content

Follow along with an episode as it plays — highlight the current line, jump on click

Free Intermediate

Anything on an episode page keyed to a moment in the episode — your own transcript, show-notes timestamps, a list of sponsor reads — can drive the player and follow it, without knowing which of Benecaster’s player surfaces (or which theme override) rendered it. Click-to-jump uses window.benecasterFrontend.seek(); the highlight follows the bubbling benecaster:timeupdate event.

The benecaster-frontend script is registered on every front-end request, but the episode page does not load it on its own. Make it a dependency of your script and it loads:

add_action( 'wp_enqueue_scripts', function () {
    // benecaster-frontend is registered on every front-end request, but the
    // episode page does not enqueue it: depend on it and it loads.
    wp_enqueue_script( 'my-follow-along', plugins_url( 'follow-along.js', __FILE__ ), [ 'benecaster-frontend' ], '1.0', true );
} );

Code

// Markup: <li class="my-line" data-episode="42" data-start="83.5">…</li>
document.addEventListener( 'click', ( event ) => {
    const line = event.target.closest( '.my-line' );
    if ( ! line ) return;
    window.benecasterFrontend.seek( Number( line.dataset.episode ), Number( line.dataset.start ) );
} );

document.addEventListener( 'benecaster:timeupdate', ( event ) => {
    const { episodeId, currentTime } = event.detail;
    document.querySelectorAll( `.my-line[data-episode="${ episodeId }"]` ).forEach( ( line ) => {
        line.classList.toggle( 'is-current', Number( line.dataset.start ) <= currentTime && currentTime < Number( line.dataset.end ) );
    } );
} );

View on GitHub →

Need this built rather than just documented? See our services →