Player Widgets: Using AJAX for Player Persistence
Last Updated -
This article is for: Player developers.
Using: Triton Digital Player Widgets.
Objective: Use AJAX to enable player persistence across pages.
AJAX is a flexible set of techniques for loading page content in the background, asynchronously. It works by decoupling the data interchange layer of the page from the presentation layer. Skilled developers can find a number of different ways to accomplish Triton Digital Player Widget persistence, so this article should not be seen as an absolute definition of how to do that. Rather, it illustrates one way to achieve it and should be seen as a guideline for your own development efforts.
This description and example assumes your web site is already AJAX-ready. For more information on creating an AJAX-ready web site, see the "Resources" links at the bottom of this page.
Define a Persistent Region
Probably the easiest thing to do is create a persistent header block, and put the Live Audio Widget inside that block. As the listener moves from page to page, the header block remains in place (i.e., doesn't re-load, so it doesn't interrupt the stream).
The page structure code below shows a very simple example of such a setup. It includes a persistent header block that contains an <h1> heading, a Live Player Widget, and a navigation bar. Under the persistent header block is the regular non-persistent page content.
<html> <head> <title>Simple Persistent Header Page</title> </head> <body> <header class="your_persistent_header"> <h1>My Excellent Persistent Header</h1> <div class="persistent_audio_widget"> <widget-audio></widget-audio> </div> <nav> <ul> <li><a href="home.php">Home</a></li> <li><a href="blog.php">Blog</a></li> <li><a href="contact.php">Contact</a></li> </ul> </nav> </header> <div id="your_page_content_wrapper"> <p>This is where the rest of the page content goes…</p> </div> </html>
Note that the Song History Widget can be persistent or not; in either case it doesn't affect the stream.
The resources listed below can guide you through the process of making your site "AJAX-ready."
- AJAXify (GitHub) https://github.com/browserstate/ajaxify
- history.js (GitHub) https://github.com/browserstate/history.js/
- Better AJAXify (GitHub) https://github.com/chemerisuk/better-ajaxify
- AJAXify Word Press https://wordpress.org/plugins/ajaxify/
- Advanced AJAX Page Loader https://wordpress.org/plugins/advanced-ajax-page-loader/
- Drupal AJAX pages https://www.drupal.org/project/ajax_pages
- mediazonic.com http://www.mediazoic.com/about/our-studio