Guía de instalación del SDK

Explicamos cómo colocar el reproductor de audio en tu sitio web.

Integración básica

El SDK se distribuye desde un servidor dedicado. En "Configuración del reproductor" del panel de administración puedes obtener tu código de integración exclusivo.

Código de integración

<!-- Contenedor del reproductor -->
<div class="pub-voice-player-container"></div>

<!-- Script de carga -->
<script
  src="https://sdk.pub-voice.com/sdk-assets/[CONTENT-SOURCE-ID]/loader.js"
  data-pub-voice-config='{"playerSelector": ".pub-voice-player-container"}'
></script>

ℹ️

[CONTENT-SOURCE-ID]sustitúyelo por el valor real que puedes obtener en "Configuración del reproductor" del panel. Tras cambiar la configuración, se aplica automáticamente en un plazo aproximado de 1 hora.

Posición del reproductor

Coloca el elemento contenedor donde quieras que aparezca el reproductor. Si no se especifica, el SDK lo inserta automáticamente en la parte superior del elemento de artículo.

Ejemplos de implementación por CMS

WordPress

Edita el archivo de plantilla del tema (normalmente single.php). Se recomienda colocar el reproductor justo debajo del título del artículo.

<!-- Ejemplo en single.php -->
<article>
  <h1><?php the_title(); ?></h1>
  
  <!-- Contenedor del reproductor (justo debajo del título) -->
  <div class="pub-voice-player-container"></div>
  
  <div class="content">
    <?php the_content(); ?>
  </div>
</article>

<!-- Colocar cerca del pie de página -->
<script
  src="https://sdk.pub-voice.com/sdk-assets/[CONTENT-SOURCE-ID]/loader.js"
  data-pub-voice-config='{"playerSelector": ".pub-voice-player-container"}'
></script>

Según el tema, puede ser difícil localizar el punto de edición del pie de página. En ese caso, coloca el loader en un lugar que se cargue en todas las páginas (p. ej., footer.php o un bloque de HTML personalizado aplicado a todo el sitio).

Next.js (App Router)

En Next.js se recomienda usar next/script para cargar el loader una sola vez en el Root Layout. El SDK se encarga automáticamente de las transiciones de página SPA, por lo que no requiere limpieza manual.

Paso 1: Cargar el loader en layout.tsx

// src/app/layout.tsx
import Script from "next/script"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="es">
      <body>
        {children}
        <Script
          id="pub-voice-loader"
          src="https://sdk.pub-voice.com/sdk-assets/[CONTENT-SOURCE-ID]/loader.js"
          strategy="afterInteractive"
          data-pub-voice-config={JSON.stringify({
            playerSelector: ".pub-voice-player-container",
          })}
        />
      </body>
    </html>
  )
}

Paso 2: Crear el componente PubVoicePlayer

// src/components/PubVoicePlayer.tsx
"use client"

export default function PubVoicePlayer() {
  // Basta con colocar el contenedor
  // El SDK gestiona automáticamente la inicialización y destrucción del reproductor
  return <div className="pub-voice-player-container" />
}

Puntos clave

strategy="afterInteractive" carga el script sin bloquear la interactividad de la página
El atributo id evita que Next.js lo cargue por duplicado
El SDK vigila con MutationObserver la adición/eliminación del contenedor y gestiona automáticamente su ciclo de vida
Coloca el componente PubVoicePlayer en la plantilla de las páginas de artículo

Solución de problemas

El reproductor no se muestra

El artículo no se ha detectado — comprueba si aparece en la lista de artículos del panel
Comprueba que la URL sea correcta

El audio no se genera

El artículo no está registrado — comprueba que el feed RSS esté bien configurado
Comprueba si el artículo aparece en la lista de artículos del panel

El reproductor no funciona correctamente en SPA

El SDK detecta automáticamente con MutationObserver la adición/eliminación del contenedor y gestiona su ciclo de vida
Comprueba que el elemento contenedor (.pub-voice-player-container) esté correctamente colocado
Si el contenedor se elimina en la transición de página, el SDK destruye automáticamente el reproductor

Navegadores soportados

Chrome (última versión)
Firefox (última versión)
Safari (última versión)
Edge (última versión)

Limitaciones

El cuerpo del artículo admite hasta 10.000 caracteres
Los archivos de audio solo se soportan en formato MP3
Solo se puede convertir en audio un artículo a la vez

¿Por qué no probarlo gratis?

PUBVOICE puede utilizarse con el plan Free. Añade un "botón de reproducción" a tus artículos y comienza una nueva relación con tus lectores.

Empieza gratis