Skip to main content

Infinite Scroll Integration

If your website loads multiple articles on the same page (infinite scroll), there are two supported ways to keep Speakup Article Player working correctly.

Option 1: Add the Player Container in each article block​

This is the simplest setup and usually requires no custom JavaScript logic.

Add the player container before the article text begins in the second and the following articles:

<div id="speakup-player"></div>
Recommended for simple integrations

Use this approach when your CMS/template already controls how each article block is rendered and you prefer a markup-only solution.

Option 2: Reinitialize the player when the active article changes​

For custom frontends or SPAs, call reinit() when a new article becomes active:

$sp.reinit({ url: 'https://example.com/new-article' });

After reinit(), re-register your event listeners (onPlay, onPause, onSongChange, and others), because previous listeners are removed during reinitialization.

API details and full examples

See the reinit() JavaScript API documentation for available options (url, podcastId, container) and SPA navigation examples.

Which option should I use?​

  • Use Option 1 if your infinite scroll pages are template-driven and you want the easiest implementation.
  • Use Option 2 if your site manages route/content changes through JavaScript and you need explicit control of player lifecycle.

Need Help?​

If you have any doubts, do not hesitate to contact us at support@audioboost.com.