Controle de Idioma

A API Rybená suporta múltiplos idiomas, permitindo que você alterne entre Português, Espanhol e Inglês conforme necessário.

Idiomas Suportados

A Rybená suporta os seguintes idiomas:

Código	Idioma	LIBRAS	Voz
`ptBR`	Português (Brasil)	✅	✅
`esES`	Espanhol (Espanha)	❌	✅
`enUS`	Inglês (Estados Unidos)	❌	✅

Atenção: Apenas o idioma Português contém a funcionalidade de tradução em LIBRAS. Para outros idiomas, use sempre o modo de voz.

Inicialização com Idioma Específico

Para inicializar a Rybená em um idioma específico, adicione o parâmetro lang à URL do script:

<script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?lang=ptBR"></script>

Exemplos de Inicialização

<script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?lang=ptBR"></script>

<script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?lang=esES"></script>

<script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?lang=enUS"></script>

Valor Padrão

O valor padrão para o idioma é ptBR (Português). Se você não especificar o parâmetro lang, a Rybená será inicializada em Português.

Combinação com Modo API

Você pode combinar o parâmetro de idioma com o modo API:

<script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?mode=api&lang=ptBR"></script>

Exemplos de Uso

Exemplo 1: Inicialização em Português com LIBRAS

Este exemplo mostra como inicializar a Rybená em Português e usar LIBRAS:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rybená - Português</title>
  <script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?mode=api&lang=ptBR"></script>
</head>
<body>
  <h1>Exemplo em Português</h1>
  <button id="translateBtn">Traduzir em LIBRAS</button>

  <script>
    RybenaApi.getInstance().handleLoaded(() => {
      RybenaApi.getInstance().openPlayer();
      RybenaApi.getInstance().switchToLibras();
      
      document.getElementById('translateBtn').addEventListener('click', () => {
        RybenaApi.getInstance().translate("Olá, bem-vindo à Rybená!");
      });
    });
  </script>
</body>
</html>

Exemplo 2: Inicialização em Espanhol

Este exemplo mostra como inicializar a Rybená em Espanhol:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rybená - Español</title>
  <script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?mode=api&lang=esES"></script>
</head>
<body>
  <h1>Ejemplo en Español</h1>
  <button id="translateBtn">Traducir</button>

  <script>
    RybenaApi.getInstance().handleLoaded(() => {
      RybenaApi.getInstance().openPlayer();
      RybenaApi.getInstance().switchToVoz();
      
      document.getElementById('translateBtn').addEventListener('click', () => {
        RybenaApi.getInstance().translate("¡Hola, bienvenido a Rybená!");
      });
    });
  </script>
</body>
</html>

Exemplo 3: Inicialização em Inglês

Este exemplo mostra como inicializar a Rybená em Inglês:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rybená - English</title>
  <script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?mode=api&lang=enUS"></script>
</head>
<body>
  <h1>English Example</h1>
  <button id="translateBtn">Translate</button>

  <script>
    RybenaApi.getInstance().handleLoaded(() => {
      RybenaApi.getInstance().openPlayer();
      RybenaApi.getInstance().switchToVoz();
      
      document.getElementById('translateBtn').addEventListener('click', () => {
        RybenaApi.getInstance().translate("Hello, welcome to Rybená!");
      });
    });
  </script>
</body>
</html>

Exemplo 4: Seleção Dinâmica de Idioma

Este exemplo mostra como permitir que o usuário selecione o idioma dinamicamente:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rybená - Seleção de Idioma</title>
</head>
<body>
  <h1>Selecione o Idioma</h1>
  <select id="languageSelect">
    <option value="ptBR">Português</option>
    <option value="esES">Español</option>
    <option value="enUS">English</option>
  </select>
  <button id="loadBtn">Carregar Rybená</button>
  <button id="translateBtn" style="display: none;">Traduzir</button>

  <script>
    document.getElementById('loadBtn').addEventListener('click', () => {
      const lang = document.getElementById('languageSelect').value;
      
      // Cria o script dinamicamente
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = `https://cdn.rybena.com.br/dom/master/latest/rybena.js?mode=api&lang=${lang}`;
      script.onload = () => {
        console.log('Rybená carregada em', lang);
        
        RybenaApi.getInstance().handleLoaded(() => {
          RybenaApi.getInstance().openPlayer();
          
          // Usa LIBRAS apenas para Português
          if (lang === 'ptBR') {
            RybenaApi.getInstance().switchToLibras();
          } else {
            RybenaApi.getInstance().switchToVoz();
          }
          
          document.getElementById('translateBtn').style.display = 'block';
        });
      };
      
      document.head.appendChild(script);
    });
    
    document.getElementById('translateBtn').addEventListener('click', () => {
      const lang = document.getElementById('languageSelect').value;
      const texts = {
        ptBR: "Olá, bem-vindo à Rybená!",
        esES: "¡Hola, bienvenido a Rybená!",
        enUS: "Hello, welcome to Rybená!"
      };
      
      RybenaApi.getInstance().translate(texts[lang]);
    });
  </script>
</body>
</html>

Exemplo 5: Detecção de Idioma do Navegador

Este exemplo mostra como detectar o idioma do navegador e carregar a Rybená automaticamente:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rybená - Detecção Automática</title>
</head>
<body>
  <h1>Rybená - Detecção Automática de Idioma</h1>
  <p>Seu idioma: <span id="detectedLang">...</span></p>
  <button id="translateBtn">Traduzir</button>

  <script>
    // Detecta o idioma do navegador
    function detectLanguage() {
      const browserLang = navigator.language || navigator.userLanguage;
      
      if (browserLang.startsWith('pt')) {
        return 'ptBR';
      } else if (browserLang.startsWith('es')) {
        return 'esES';
      } else {
        return 'enUS'; // Padrão para outros idiomas
      }
    }
    
    const lang = detectLanguage();
    document.getElementById('detectedLang').textContent = lang;
    
    // Carrega a Rybená com o idioma detectado
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = `https://cdn.rybena.com.br/dom/master/latest/rybena.js?mode=api&lang=${lang}`;
    script.onload = () => {
      RybenaApi.getInstance().handleLoaded(() => {
        RybenaApi.getInstance().openPlayer();
        
        // Usa LIBRAS apenas para Português
        if (lang === 'ptBR') {
          RybenaApi.getInstance().switchToLibras();
        } else {
          RybenaApi.getInstance().switchToVoz();
        }
        
        const texts = {
          ptBR: "Olá, detectamos que você fala português!",
          esES: "¡Hola, detectamos que hablas español!",
          enUS: "Hello, we detected you speak English!"
        };
        
        document.getElementById('translateBtn').addEventListener('click', () => {
          RybenaApi.getInstance().translate(texts[lang]);
        });
      });
    };
    
    document.head.appendChild(script);
  </script>
</body>
</html>

Boas Práticas

Dica: Sempre especifique o idioma explicitamente se você sabe qual idioma sua aplicação usará. Isso garante uma experiência consistente para todos os usuários.

Atenção: Lembre-se de que LIBRAS está disponível apenas para Português. Se você tentar usar switchToLibras() em outros idiomas, a tradução não funcionará corretamente.

Sugestão: Para aplicações multilíngues, considere salvar a preferência de idioma do usuário em localStorage e carregar a Rybená com esse idioma na próxima visita.

Resumo dos Parâmetros

Parâmetro	Valores Aceitos	Padrão	Descrição
`lang`	`ptBR`, `esES`, `enUS`	`ptBR`	Idioma de inicialização