Jump to specific timestamp

[matthacksteiner]

I am working on a website with the embed player. How can I jump to a specific time of the episode?

[johnloringpollard]

Are you a web developer? You will need an understanding of javascript to do this. First assign a variable with the audio player like var audio = $("audio"), then you can set it with a command like audio.currentTime = 60 and that will set the time to 60 seconds. You might have to search inside the iframe of the embedded player when targeting the audio player.

If you have any code examples that you are trying or if you send me the site that you are trying to do it on, I can help more.

[matthacksteiner]

That's the page I am working on: https://www.thissoundiride.net/episodes/from-an-ancient-art-form-performed-in-russia-to-frenetic-euphoria-out-of-kenya

In the sidebar is a section called "Tracklist" - I will add a link with a timestamp in front of the songs. If the link is clicked, the embed player should jump to the timestamp...

[johnloringpollard]

So on your website you can do the following... Once a person clicks on a link, just bind the click event and set the time of the player. Let me know how that works for you!

player.setCurrentTime(20)
player.play()

[matthacksteiner]

Sorry for the late reply! Currently this is what my code looks like:

document.addEventListener('click', function (event) {
    let player = document.querySelector('.buzzsprout-player')

    if (!event.target.matches('.jump')) return;
    event.preventDefault();
    player.setCurrentTime(20)
    player.play()

}, false);

The console prints this error message:

Uncaught TypeError: Cannot read property 'setCurrentTime' of null
    at HTMLDocument.<anonymous> (main.js:68)

Ho do I target the player correctly? Thanks

[johnloringpollard]

Try this instead document.querySelector('.buzzsprout-player audio').

Also you should be able to do document.querySelector('.buzzsprout-player').addEventListener...

[matthacksteiner]

Still the same problem. I am not a very skilled JS developer - thanks for your patience and help.

This is my current code:

document.addEventListener('click', function (event) {
    let player = document.querySelector('.buzzsprout-player audio')

    if (!event.target.matches('.jump')) return;
    event.preventDefault();
    player.setCurrentTime(20)
    player.play()

}, false);

[johnloringpollard]

Try this, add the PlayerJS library to your website <script src="//cdn.embed.ly/player-0.1.0.min.js"></script>

Then you can control the audio through playerjs.

player = new playerjs.Player(document.querySelector('iframe'));
player.on('ready', () => { 
  player.setCurrentTime(20); 
  player.play()
});

[matthacksteiner]

this worked for me:

document.addEventListener('click', function (event) {
            const player = new playerjs.Player(document.querySelector('iframe'));

            if (!event.target.matches('.jump')) return;
            event.preventDefault();
            player.on('ready', () => {
                player.setCurrentTime(20);
                player.play()
            });
}, false);

Thanks for your help!