Começando com a API
Este guia irá ajudá-lo a configurar o modo API da Rybená e fazer sua primeira chamada programática.
Pré-requisitos
Antes de começar, certifique-se de que:
- Você tem conhecimento básico de JavaScript
- Você tem acesso ao código da sua aplicação web
- Você tem uma licença válida da Rybená
Passo 1: Inicializar o Script em Modo API
Para usar a API, você precisa inicializar o script Rybená com o parâmetro mode=api:
<script
type="text/javascript"
src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?mode=api"
></script>Adicione o script ao <head> ou antes do fechamento do <body> do seu HTML
Certifique-se de incluir o parâmetro mode=api na URL do script
O script será carregado em background, sem mostrar a interface inicial
Passo 2: Aguarde o Carregamento
A API só estará disponível após o script Rybená ser completamente carregado. Use o manipulador handleLoaded para garantir que a API está pronta:
RybenaApi.getInstance().handleLoaded(() => {
console.log("Rybená API está pronta!");
// Sua código aqui
});Passo 3: Faça Sua Primeira Chamada
Agora você pode fazer sua primeira chamada à API. Vamos traduzir um texto simples:
RybenaApi.getInstance().handleLoaded(() => {
// Mostra o player
RybenaApi.getInstance().openPlayer();
// Traduz um texto
RybenaApi.getInstance().translate("Olá, bem-vindo à Rybená!");
});Passo 4: Manipule Eventos
Você pode configurar callbacks para responder a eventos específicos:
RybenaApi.getInstance().handleLoaded(() => {
// Configura callback quando a tradução terminar
RybenaApi.getInstance().handleTranslate(() => {
console.log("Tradução concluída!");
});
// Traduz um texto
RybenaApi.getInstance().translate("Este texto será traduzido");
});Exemplo Completo
Aqui está um exemplo completo de uma página HTML usando a API Rybená:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rybená API Exemplo</title>
<script
type="text/javascript"
src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?mode=api"
></script>
</head>
<body>
<h1>Exemplo de API Rybená</h1>
<button id="translateBtn">Traduzir Texto</button>
<button id="pauseBtn">Pausar</button>
<button id="playBtn">Continuar</button>
<script>
// Aguarda a Rybená carregar
RybenaApi.getInstance().handleLoaded(() => {
console.log("Rybená API está pronta!");
// Mostra o player
RybenaApi.getInstance().openPlayer();
// Configura botões
document
.getElementById("translateBtn")
.addEventListener("click", () => {
RybenaApi.getInstance().translate(
"Olá, este é um exemplo de tradução!"
);
});
document.getElementById("pauseBtn").addEventListener("click", () => {
RybenaApi.getInstance().pause();
});
document.getElementById("playBtn").addEventListener("click", () => {
RybenaApi.getInstance().play();
});
});
</script>
</body>
</html>Inicialização em Background
Para abrir a Rybená completamente em background (sem mostrar nada inicialmente), use:
RybenaDOM.getInstance().getRybenaScripts("hidden");Isso é útil quando você quer controlar completamente quando e como a Rybená será exibida.
Verificar se Está Traduzindo
Você pode verificar se a Rybená está atualmente traduzindo:
const isTranslating = RybenaApi.getInstance().isTranslating();
console.log("Está traduzindo:", isTranslating);Boas Práticas
Dica: Sempre use handleLoaded antes de fazer qualquer chamada à API para
garantir que o script foi completamente carregado.
Atenção: Não chame métodos da API antes que o script seja carregado. Isso pode causar erros.
Sugestão: Use handleTranslate para executar ações após a tradução ser
concluída, como mostrar uma notificação ou atualizar a interface.
Próximos Passos
Agora que você configurou a API básica, explore:
- Controle do Player - Gerencie visibilidade, posição e tamanho
- Controle de Tradução - Traduza textos e controle a reprodução
- Event Handlers - Configure callbacks para eventos
- Exemplos - Veja exemplos de integração completos
Solução de Problemas
Suporte
Caso tenha alguma dúvida ou encontre problemas, entre em contato com [email protected]