Carrega o motor antes Sem isso, as montarias não servem para nada.
Desenvolvedores e equipes gerenciando HTML personalizado, sites estáticos ou sistemas de gerenciamento de conteúdo (CMS) que não sejam WordPress podem incorporar script TTS uma vez e entregue naturalmente site personalizado com voz de IA com as GSpeechA reprodução e a síntese são executadas através do GSpeech Cloud Console - Nenhuma chave de API necessáriaSem pilha TTS do lado do servidor e sem carga extra de hospedagem.
Este guia mostra como Adicionar texto para fala a um site HTMLCole o código de conexão de uma linha antes , coloque jogadores de página inteira/botão/círculo com montagens HTML personalizadas e, em seguida, mapeie. Seletor de conteúdo e Elemento de renderização às suas classes de layout e IDs.
Ideal para: Desenvolvedores, geradores estáticos e temas CMS personalizados onde você controla o HTML e deseja um único elemento incorporado, além de seletores CSS para layouts personalizados.
Visão geral do TTS do site Demonstrações ao vivo Abra o console do Cloud.
O código de conexão é carregado. GSpeech Em todas as páginas em que estiver presente. Os jogadores aparecem apenas onde você coloca montarias/HTML personalizado e somente quando o widget correspondente estiver publicado e configurado.
Em um site HTML personalizado, um elemento incorporado carrega o mecanismo. Cada widget, então, mapeia suas próprias classes e IDs para um ponto de montagem — assim, você mantém o controle total do layout enquanto a narração permanece no Console da Nuvem:
Carrega o motor antes Sem isso, as montarias não servem para nada.
Configuração do painel de controle: voz, idioma, design, configurações de conteúdo, regras de URL para qualquer rota ou modelo.
Um marcador no HTML da sua página (por exemplo) .gsp_full_player) onde a interface do jogador aparece.
Seletor de conteúdo = o que ler. Elemento de renderização = onde o jogador aparece. Excluir / Título / URLs refinam a correspondência.
Coloque qualquer uma dessas montarias onde o jogador deve aparecer na página. Clique em uma carta para copiá-la. Em seguida, defina o widget. Elemento de renderização para a mesma turma.
<div class="gsp_full_player"></div>
<div class="gsp_button_player"></div>
<div class="gsp_circle_player"></div>
Documentação completa do Player Documentação do Button Player Documentação do Circle Player
No widget Conteúdo Você pode usar seletores de tabulação, apontar para o artigo, para o elemento principal ou para elementos personalizados que você possui — qualquer seletor CSS que sua marcação exponha.
Define Que texto é falado?Use seletores CSS, separados por vírgulas. Exemplos:
Define onde a interface do jogador é injetadaDeve corresponder a um elemento real na página.
Posiciona o jogador Antes or Depois de o conteúdo do elemento de renderização. Para uma div de montagem dedicada, After/Before geralmente ainda funciona em relação a esse nó — mantenha a montagem vazia e deixe o widget preenchê-la.
Seletores que devem não Podem ser ditas, mesmo que estejam dentro do Seletor de Conteúdo. Separadas por vírgula. Exemplo: #comments,.sidebar,.ads,.no-speech.
Texto de narração fixo opcional. Quando usado, o Seletor de Conteúdo pode permanecer vazio. Útil para blocos promocionais estáticos quando o conteúdo do DOM não deve controlar o áudio.
Regra geral para sites HTML: O seletor de conteúdo aponta para o contêiner que você controla (por exemplo, article.post or #main), O elemento de renderização aponta para a montagem e a lista de exclusão ignora a navegação, os anúncios e os comentários.
Seu modelo estático ou CMS inclui um artigo e uma montagem:
<article class="post custom-layout">...</article>
<div class="gsp_full_player"></div>
Se o ponto de montagem estiver dentro de uma região de conteúdo CMS personalizada, o Seletor de Conteúdo pode ser relativo:
Uso self_class quando o próprio contêiner de montagem contém o texto que deve ser narrado.
Lugar .gsp_button_player em vários modelos estáticos. Widget de reprodutor com um botão e elemento de renderização. .gsp_button_player Pode alimentar todos eles. Crie widgets adicionais somente quando a voz, o design, os seletores ou as regras de URL precisarem ser diferentes.
Quando o texto da página muda, o Smart Audio Sync pode regenerar a narração em segundo plano. Os campos de mapeamento ainda são decisivos. qual texto e onde O jogador está vivo.
Precisa de ajuda para encontrar seletores para um tema personalizado ou layout de construtor? Entre em contato com o suporte do GSpeech.Envie a URL da página e nós ajudaremos a mapear o Seletor de Conteúdo/Elemento de Renderização.
Relacionado