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.


If your Live Audio Widget exists on more than one page of your web site, you can use AJAX (asynchronous JavaScript and XML) to ensure your listeners have a seamless, persistent audio experience when they move from one page to another. (Without AJAX, the Live Audio Widgets reload every time the listener moves to another page, which can cause momentary interruptions while the stream is re-established.)

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.

Resources

The resources listed below can guide you through the process of making your site "AJAX-ready."

General

Wordpress

Drupal

Websites