Widgets: Uso de AJAX para la persistencia del reproductor

Anterior Siguiente

La documentación principal para desarrolladores de Player Widgets se encuentra aquí.

Si su widget Live Audio existe en más de una página de su sitio web, puede usar AJAX (JavaScript y XML asíncronos) para asegurarse de que sus oyentes tengan una experiencia de audio continua y sin interrupciones cuando se mueven de una página a otra. (Sin AJAX, los widgets de audio en vivo se recargan cada vez que el oyente se mueve a otra página, lo que puede causar interrupciones momentáneas mientras se restablece el stream).

AJAX es un conjunto flexible de técnicas para cargar contenido de página en segundo plano, de forma asíncrona. Funciona desacoplando la capa de intercambio de datos de la página de la capa de presentación. Los desarrolladores expertos pueden encontrar varias maneras diferentes de lograr la persistencia del widget de reproducción de Triton Digital, por lo que este artículo no debe verse como una definición absoluta de cómo hacerlo. Más bien, ilustra una forma de lograrlo y debe verse como una guía para sus propios esfuerzos de desarrollo.

Esta descripción y ejemplo suponen que su sitio web ya está listo para AJAX. Para obtener más información sobre cómo crear un sitio web listo para AJAX, consulte los enlaces "Recursos" en la parte inferior de esta página.

Definir una región persistente

Probablemente lo más fácil de hacer es crear un bloque de encabezado persistente y colocar el widget de audio en vivo dentro de ese bloque. A medida que el oyente se mueve de una página a otra, el bloque de encabezado permanece en su lugar (es decir, no se vuelve a cargar, por lo que no interrumpe la transmisión).

El código de estructura de página a continuación muestra un ejemplo muy simple de dicha configuración. Incluye un bloque de encabezado persistente que contiene un <h1> , un widget de reproductor en vivo y una barra de navegación. Debajo del bloque de encabezado persistente está el contenido normal de la página no persistente.

<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>

Tenga en cuenta que el widget Historial de canciones puede ser persistente o no; En cualquier caso, no afecta la transmisión.

Recursos

Los recursos que se enumeran a continuación pueden guiarlo a través del proceso de hacer que su sitio esté "listo para AJAX".

General

Wordpress

Drupal

Sitios web