Texto a voz para sitios web HTML: Integre la voz de la IA.
Integración HTML
Texto a voz para sitios web HTML: incorpore voz de IA con un script.
Desarrolladores y equipos que ejecutan HTML personalizadoLos sitios estáticos o las pilas de CMS que no son de WordPress pueden insertar script TTS una vez y entregar natural Sitio web personalizado con IA y voz con GSpeech. La reproducción y la síntesis se realizan a través de la GSpeech Consola de nube - No se requieren claves API, sin pila TTS del lado del servidor y sin carga de alojamiento adicional.
Esta guía muestra cómo Agregar texto a voz a un sitio web HTML: pegue el código de conexión de una línea antes , coloca jugadores de página completa / botón / círculo con soportes HTML personalizados, luego mapea Selector de contenido y Elemento de renderizado a sus clases e identificadores de diseño.
Incrustaciones de una sola línea — pegar antes en cualquier pila personalizada o sitio estático.
Generación de audio en la nube — Sintetizar una vez, almacenar en caché y reproducir en visitas posteriores.
No se requieren claves API — voces y jugadores de una misma consola.
Mapeo basado en selectores — Diríjase a cualquier artículo, contenedor de diseño principal o personalizado.
Ideal para: Desarrolladores, generadores estáticos y temas CMS personalizados donde usted controla el HTML y desea una única inserción más selectores CSS para diseños personalizados.
Crear una página web — si aún no has añadido un sitio, sigue crear una página web.
Abre el sitio — ve a tu Afiliados y seleccione el sitio.
Copia el código HTML - abierto Integraciones → Sitio web HTML y copie el código de conexión.
Pegar antes — inserta el código en tu plantilla antes del cierre etiquetar y luego desplegar.
El código de conexión se carga GSpeech En todas las páginas donde esté presente. Los jugadores aparecen solo donde se colocan monturas/HTML personalizado y solo cuando el widget correspondiente está publicado y configurado.
Modelo de mapeo
Inserta scripts, puntos de montaje y mapeo de selectores para HTML personalizado.
En un sitio HTML personalizado, un solo elemento incrustado carga el motor. Cada widget asigna sus propias clases e ID a un punto de montaje, de modo que usted mantiene el control total del diseño mientras la narración permanece en la consola de Cloud:
1Código de conexión
Carga el motor antes Sin ella, las monturas no hacen nada.
2Widget personalizado
Configuración del panel de control: voz, idioma, diseño, configuración de contenido, reglas de URL para cualquier ruta o plantilla.
3Montaje / HTML personalizado
Un marcador en el HTML de tu página (por ejemplo .gsp_full_player) donde aparece la interfaz de usuario del jugador.
4Mapeo de contenido
Selector de contenido = qué leer. Elemento de renderizado = donde aparece el jugador. Excluir / Título / URLs refinan la coincidencia.
Widgets ilimitados — Widgets separados de página completa, botón o círculo para diferentes diseños, idiomas o formatos.
Jugadores ilimitados por widget — Un widget publicado puede alimentar todos los puntos de montaje coincidentes permitidos por las reglas de Render Element + URL.
Soportes HTML personalizados — en los sitios HTML el soporte se ve así <div class="gsp_full_player"></div>En WordPress, la misma idea utiliza códigos cortos como [gspeech].
Valores predeterminados frente a valores avanzados — Los soportes predeterminados funcionan rápidamente. Los diseños personalizados únicos necesitan valores precisos para el selector de contenido y el elemento de renderizado.
Jugadores
Agrega jugadores con HTML personalizado
Coloca cualquiera de estas monturas donde el jugador debería aparecer en la página. Haz clic en una tarjeta para copiarla. Luego configura el widget. Elemento de renderizado a la misma clase.
Asignar diseños HTML personalizados al reproductor
En el widget Contenido tabula, apunta los selectores al artículo, principal o contenedores personalizados que poseas, cualquier selector CSS que exponga tu marcado.
id → # — HTML id="main" → escribir #main.
clase → . — HTML class="post-content" → escribir .post-content.
Reúne las piezas — El selector de contenido acepta varios destinos, separados por comas: #intro,.body,#summary.
Recortar piezas — La lista de exclusión utiliza el mismo # / . + comas: #comments,.ads,.share-buttons.
Encontrar valores — clic derecho → Inspeccionar en la página en vivo. Tutorial completo para principiantes: Valores HTML (# / .).
CS
Selector de contenido
Define ¿Qué texto se pronuncia?Utilice selectores CSS, separados por comas (ensamble el contenido en partes). Ejemplos:
artículo, .post-content, #principal, .diseño-personalizado — lee esos elementos (# = id, . = clase).
artículo,sección,#mi_id,.mi_clase — Múltiples objetivos en un mismo campo (fragmentos combinados en una sola narración).
clase_padre — lee el contenedor padre del montaje (útil para HTML personalizado dentro de un bloque de contenido).
auto_clase — lee el mismo contenedor en el que se encuentra el soporte.
Déjelo vacío si usa Texto de contenido en su lugar (texto fijo, no contenido DOM).
RE
Elemento de renderizado
Define donde se inyecta la interfaz de usuario del jugadorDebe coincidir con un elemento real de la página.
Para montajes HTML personalizados, configúrelo en la clase de montaje: .gsp_full_player, .gsp_button_player, o .gsp_circle_player.
También puede seleccionar contenedores de diseño como cuerpo, # Content, o .encabezado-del-artículo cuando no se utiliza un soporte específico.
Si el selector de contenido es correcto pero no aparece nada, normalmente el elemento de renderizado es incorrecto o falta en esa página.
RP
Posición de renderizado
Coloca al jugador Antes or Después el contenido del elemento de renderizado. Para un div de montaje dedicado, After/Before generalmente sigue funcionando en relación con ese nodo: mantenga el montaje vacío y deje que el widget lo llene.
EX
Lista de exclusión
Selectores que deben No ser hablado, incluso si se encuentran dentro del Selector de contenido. Lo mismo # / . reglas, separadas por comas. Ejemplo: #comments,.sidebar,.ads,.no-speech.
TT
Selector de título / Texto del título
Selector de título — título dinámico de la página (ejemplo: h1).
Texto del título — Título fijo que se muestra en el reproductor. Deje el selector de título vacío cuando utilice el texto del título.
CT
Texto de contenido
Texto de narración fijo opcional. Cuando se utiliza, el selector de contenido puede permanecer vacío. Útil para bloques promocionales estáticos cuando el contenido del DOM no debe controlar el audio.
Regla general para sitios HTML: El selector de contenido apunta al contenedor que usted controla (por ejemplo article.post or #main), Render Element apunta al soporte y Exclude List omite la navegación, los anuncios y los comentarios.
Ejemplos
Ejemplos prácticos de mapeo para diseños HTML personalizados
Ejemplo A
Artículo con diseño personalizado y reproductor de página completa.
Tu plantilla estática o CMS incluye un artículo y un montaje:
Selector de contenido - article.post.custom-layout
Elemento de renderizado - .gsp_full_player
Lista de exclusión - .share-buttons,.related-posts (opcional)
Selector de título - h1 (opcional)
Ejemplo B
Montar dentro de una región de contenido CMS — clase_padre
Si el montaje se encuentra dentro de una región de contenido CMS personalizada, el selector de contenido puede ser relativo:
Selector de contenido - parent_class (lee el padre del soporte)
Elemento de renderizado - .gsp_full_player
Usar self_class cuando el propio contenedor de montaje contiene el texto que debe ser narrado.
Ejemplo C
Plantillas de sitio estático con un widget de botón
Especial .gsp_button_player en muchas plantillas estáticas. Widget de reproductor de un botón con elemento de renderizado. .gsp_button_player Puede alimentarlos a todos. Cree widgets adicionales solo cuando la voz, el diseño, los selectores o las reglas de URL deban ser diferentes.
Widgets
Crea widgets de voz con IA personalizados para tu sitio web.
Seleccione el sitio web — abre el sitio HTML al que te conectaste.
Agregar nuevo widget — Widgets → Agregar nuevo widget → elegir tipo (Reproductor completo, Botón, Círculo, …) → Crear.
Configurar contenido — configure el selector de contenido, el elemento de renderizado, la lista de exclusión y los títulos para su diseño.
Configurar reproductor / Diseño — voz, paneles, tema, ancho, márgenes.
Publicar y escuchar — Establezca el estado en Publicado, actualice la página en vivo y pruebe la reproducción.
Cuando cambia el texto de la página, Smart Audio Sync puede regenerar la narración en segundo plano. Los campos de mapeo aún deciden lo cual texto y dónde El jugador vive.
Preguntas Frecuentes
Preguntas frecuentes: Integración de texto a voz en sitios web HTML
¿Un sitio web HTML admite la conversión de texto a voz y voces de IA con GSpeech?
Sí. GSpeech funciona en cualquier sitio HTML, generador estático o CMS personalizado donde pueda pegar un script antes Obtendrás voces de IA naturales y jugadores modernos sin necesidad de construir un sistema de conversión de texto a voz del lado del servidor.
¿Cómo puedo insertar el script de síntesis de voz de GSpeech en un sitio web personalizado?
Copia el código de conexión de Integraciones → Sitio web HTML. Pégalo una vez en tu plantilla compartida antes y desplegar. Luego agregue un punto de montaje como por ejemplo: <div class="gsp_full_player"></div> en el diseño donde debe aparecer el jugador y establecer Render Element a esa clase.
¿Qué diferencia hay entre Content Selector y Render Element en un sitio HTML personalizado?
Selector de contenido es cualquier selector CSS para el texto que quieres que se pronuncie, por ejemplo #main, article.posto una clase de su CMS. Elemento de renderizado Aquí es donde se inyecta la interfaz de usuario del jugador, normalmente la clase de tu montura. Como controlas el marcado, puedes asignar cualquier diseño personalizado con precisión.
¿El audio de GSpeech ralentizará mi sitio HTML o estático?
No. La síntesis y el almacenamiento en caché ocurren en el GSpeech En la nube, el script del cliente es ligero y los reproductores solo se cargan donde existen soportes. Tu alojamiento web continúa sirviendo HTML, CSS y JavaScript normales mientras los visitantes escuchan bajo demanda.
¿Necesito claves API para integrar la voz de IA personalizada en mi sitio web?
No. GSpeech is No se requieren claves API Para sitios HTML. Pegue el código de inserción, configure los widgets en la consola de Cloud y publique. Las voces y los reproductores se gestionan desde una sola cuenta sin necesidad de claves TTS de terceros en su código.
Ayuda
¿Necesitas ayuda para encontrar selectores para un tema personalizado o un diseño de constructor?
Contacta con el soporte de GSpeechEnvíanos la URL de la página y te ayudaremos a asignar el selector de contenido/elemento de renderizado.
