📖 UM Contador de Histórias
Um site simples e bonito para contar histórias de dormir, feito para funcionar no celular.
- Contador dinâmico: quantas histórias existem, quantas leituras já aconteceram, quantos minutos ouvidos e quantas noites seguidas.
- Acervo com busca, filtro por idade e favoritos.
- Criar histórias: sugestões de temas e personagens, escolha da idade (2–5, 6–9, 10+, ou "as duas juntas"), e uma tela de aprovar antes de guardar.
- Leitura em voz alta, com três opções que você escolhe dentro do próprio site: voz do celular (grátis), ElevenLabs (a mais natural) ou OpenAI.
- Efeitos sonoros — chuva, vento, mar, fogueira, floresta, trovão, magia — criados pelo próprio site, sem baixar nenhum arquivo.
- Nada sai do seu celular: as histórias ficam salvas no navegador, com botões de exportar e importar backup.
🚀 Como publicar (passo a passo, do zero)
1. Criar o repositório
- Entre em github.com e clique no + no canto superior direito → New repository.
- Em Repository name, escreva:
contador-de-historias
- Em Choose visibility, deixe Public (o GitHub Pages de graça só funciona em repositório público).
- Clique em Create repository.
2. Subir os arquivos
- Na página do repositório recém-criado, clique em Add file → Upload files.
- Arraste os arquivos:
index.html, historias.json, capa.jpg, fundo-historia.jpg e README.md.
- Lá embaixo, clique no botão verde Commit changes.
3. Ligar o site (GitHub Pages)
- Ainda no repositório, clique em Settings (a engrenagem, no menu de cima).
- No menu da esquerda, clique em Pages.
- Em Source, escolha Deploy from a branch.
- Em Branch, escolha main e a pasta / (root). Clique em Save.
- Espere de 1 a 3 minutos e recarregue a página. Vai aparecer o endereço do site, mais ou menos assim:
https://SEU-USUARIO.github.io/contador-de-historias/
4. Colocar o ícone no celular
Abra esse endereço no celular:
- Android (Chrome): menu ⋮ → Adicionar à tela inicial
- iPhone (Safari): botão de compartilhar → Adicionar à Tela de Início
Pronto: vira um app com ícone, em tela cheia.
🖼️ As duas imagens
capa.jpg — a capa larga no topo da tela Início, em qualquer aparelho.fundo-historia.jpg — o cenário nas laterais, só em tela de 1080px ou mais (computador). No celular e no tablet ele nem carrega, para não gastar dados.
No computador, a aba Acervo usa a tela toda, em 2 ou 3 colunas de cartões; o texto da história continua numa coluna estreita (cerca de 70 letras por linha), que é o tamanho que menos cansa a leitura.
Para trocar qualquer uma: suba outra imagem com o mesmo nome por cima. Se o arquivo não existir, o site simplesmente não mostra nada ali — nada quebra.
👧 Para quem são as histórias
Em Configurações, a primeira seção permite informar os primeiros nomes de quem vai ouvir e se é uma menina, um menino, duas ou mais meninas, dois ou mais meninos, ou um grupo misto.
Com isso:
- a saudação do topo passa a ser "boa noite, Lara e Julia" (ou "boa noite, meninos", "boa noite, crianças"…);
- a IA escreve fazendo a concordância certa e, se o botão estiver ligado, abre a história com uma saudação a quem vai ouvir.
🛡️ Nomes das crianças não vão para a IA
Com Configurações → 🛡️ Não mandar os nomes para a IA ligado (vem ligado), antes de pedir uma história o site troca cada nome por um código ([NOME1], [NOME2]…). A IA escreve com os códigos e o próprio celular coloca os nomes de volta. Dá para acrescentar outros nomes em Outros nomes para proteger (irmãos, pets, escola).
Atenção: a voz de internet precisa receber o texto para ler — inclusive os nomes. Para nada sair do aparelho, use a voz do celular.
Deixando tudo em branco, o topo mostra apenas "BOA NOITE! QUE TAL UMA HISTÓRIA?" e nada de nome aparece em lugar nenhum. Essa informação fica só no aparelho — não vai para o repositório.
🔈 Ouvir o cumprimento — o botão fala, com a voz escolhida, a frase "Olá Lara e Julia, vamos ouvir uma historinha?". Sem nomes, usa o coletivo ("Olá meninas…"); sem nada informado, vira "Olá, vamos ouvir uma historinha?".
Com o botão Falar o cumprimento antes da história ligado, essa frase é dita antes de cada leitura. O áudio dela é gerado uma única vez e reaproveitado em todas as histórias — não consome cota de novo.
🔊 Escolhendo a voz
Tudo se configura na aba Configurações, dentro do próprio site. Dá para trocar quando quiser.
| Opção | Custo | Qualidade | Precisa de chave? |
|---|
| Gemini ⭐ | grátis na cota do Google | natural, com entonação de verdade | sim (grátis) |
| Voz do celular | grátis | boa, mas robótica | não |
| ElevenLabs | pago | a melhor que existe | sim |
| OpenAI | barato | muito boa | sim |
Onde pegar cada chave:
- Gemini (recomendado) →
aistudio.google.com/apikey → Create API key → Create project. As chaves novas começam com AQ. (as antigas começavam com AIza); as duas funcionam.
Se aparecer "o Google está lotado" (erro 503): não é nada seu. O site já espera e tenta de novo sozinho (três vezes, com pausas crescentes) e, se continuar lotado, tenta um modelo reserva. Se mesmo assim falhar, espere um minuto e toque em gerar de novo. Numa geração de vários capítulos, os que já saíram ficam guardados e Tentar de novo continua do capítulo seguinte.
Se aparecer "este modelo não está mais disponível": o Google aposenta modelos de tempos em tempos. Vá em Configurações → IA que escreve as histórias e toque em 🔄 Ver os modelos que a minha chave aceita — o site pergunta ao Google quais existem hoje e preenche a lista. Escolha um e pronto. A mesma chave serve para a voz e para escrever as histórias. São 30 vozes, e no campo "Como ela deve ler" você escreve em português o que quiser — tipo "sussurre nas partes de suspense".
- ElevenLabs →
elevenlabs.io → conta → Profile → API Key. Depois, no site, toque em Carregar minhas vozes e escolha a que preferir.
- OpenAI →
platform.openai.com → adicione créditos → API keys → Create new secret key.
As chaves ficam salvas só no navegador do seu celular. Elas não vão para o GitHub e ninguém mais as vê. Como o repositório é público, nunca escreva uma chave dentro dos arquivos.
Dica: com a voz do celular, se a tela apagar o Android às vezes interrompe a leitura. Com ElevenLabs ou OpenAI é áudio de verdade, então continua tocando normalmente.
↩️ Botão Voltar e Início
- O Voltar do celular funciona dentro do site: fecha a janela aberta, depois a história, depois volta ao Início. Só sai do site quando já está no Início sem nada aberto.
- Para ir direto ao Início: a aba 🏠 Início na barra de baixo, o botão 🏠 no leitor, ou um toque no ícone/nome do app no topo.
- Com voz de internet, a tela de bloqueio e a notificação do celular mostram o nome da história, com play, pausa e trecho anterior/próximo.
🎤 Comandos de voz (experimental)
Vem desligado. Em Configurações → 🎤 Comandos de voz, ligue Mostrar o botão 🎤. Aparece um 🎤 no topo e outro nos controles do leitor. Toque e fale:
tocar / continuar · pausar · voltar / repetir · avançar / pular · próximo capítulo · capítulo anterior · do início · mais rápido · mais devagar · favorita · já lida · fechar · história da noite · acervo · criar uma história sobre … · ler a história do …
- O microfone só abre com o toque — nunca sozinho. Enquanto escuta, a leitura pausa (para não ouvir a própria história).
- No Chrome, o que é falado vai ao Google para virar texto; por isso vem desligado.
- Entender frases livres com a IA (também desligado): quando nenhum comando fixo servir, a IA de texto traduz o pedido (ex.: "quero aquela do dragão"). Gasta um pouco da cota.
- Funciona no Chrome/Edge (Android e computador) e no Safari do iPhone. Firefox não tem reconhecimento de fala.
✨ Escolhendo quem escreve as histórias
Também na aba Configurações:
- Só eu escrevo — nenhuma chave, funciona até sem internet.
- Gemini — tem cota gratuita por dia. Chave em
aistudio.google.com/apikey.
- Claude — chave em
console.anthropic.com. Pago por uso, centavos por história.
- OpenAI — usa a mesma chave da voz.
A aba Criar tem estas entradas, todas com sugestões sorteáveis:
| Entrada | O que faz |
|---|
| Para quem é | 2–5, 6–9, 10+ ou "as duas juntas" — muda vocabulário e complexidade |
| Quantos capítulos | 1 (história única) até 6. Com 2 ou mais, a IA escreve os capítulos em sequência, cada um lendo o anterior, e salva tudo como uma série |
| Duração | Curtinha (~3 min), Média (~6 min), Longa (~10 min) ou escolhida em minutos (2 a 25). Com vários capítulos, vale para cada capítulo |
| Desfecho | Final feliz, reviravolta, lição sem moralismo, engraçado, fecha em círculo, reencontro, revelação na última frase, ou final aberto |
| Tema | O enredo em uma frase |
| Personagens | Quem aparece na história |
| Onde acontece | O cenário |
| Clima | Engraçada, misteriosa, emocionante, com reviravolta, calminha… — pode marcar várias ao mesmo tempo |
| Parecida com… | Inspiração: pega o espírito de uma obra conhecida, sem copiar nada dela |
| No estilo de uma história que já temos | A IA lê uma das suas histórias e imita o jeito de contar — ritmo, humor, tamanho das frases — com enredo novo |
| Pedido especial | Qualquer instrução livre |
A IA escreve e aparece a tela de aprovar / ouvir antes / editar / pedir outra. Só o que você aprovar é guardado.
⚡ Por que a voz demora (e como não demorar)
Vozes de IA geram o áudio antes de tocar — quanto maior o trecho, mais demora. O site resolve isso em três camadas:
- Começo curtinho. O primeiro trecho tem só uma ou duas frases, então a leitura começa em segundos. Os trechos seguintes vão ficando maiores.
- Esteira em segundo plano. Enquanto um trecho toca, o site já está gerando os próximos dois. Na prática, o áudio corre na frente da leitura.
- Fica guardado. Todo áudio gerado é salvo neste aparelho. Da segunda vez, a mesma história toca na hora — e até sem internet.
O botão que resolve tudo: abra a história e toque em ⬇️ Baixar a voz desta história, logo abaixo dos controles. Ele gera a história inteira com barra de progresso e guarda no aparelho. A partir daí:
- começa na hora, sem espera;
- voltar um trecho, repetir ou ouvir de novo amanhã não gasta a cota de novo;
- funciona sem internet.
O botão mostra o estado: "Baixar a voz (9 trechos)", "Continuar baixando (5 de 9 prontos)" ou "✅ Áudio guardado". Se parar no meio (cota, internet), o que já baixou fica salvo e o botão continua de onde parou.
🎙️ Voz guardada por história
- No acervo, cada história mostra ⚡ voz guardada (inteira no aparelho) ou ◐ voz em parte. O selo vale para qualquer voz de internet já baixada — mesmo que agora a voz escolhida seja a do celular.
- Trocar para a voz do celular não apaga nada. Se a história já tem voz do Gemini (ou outra) inteira guardada, ela toca com essa voz, sem gastar cota e sem internet. A faixa acima dos controles avisa: "🟢 Voz guardada (Gemini · Sulafat) — toque para usar a voz do celular". Toque de novo para voltar.
- Para desligar esse comportamento: Configurações → Voz guardada no aparelho → Com a voz do celular, usar a voz guardada.
- Apagar a voz de uma história só: no leitor, o link 🗑️ apagar a voz guardada desta história logo abaixo da faixa (ou no menu ⋯ da história).
- Ver quanto ocupa: Configurações → Voz guardada no aparelho mostra o total em MB, a lista história por história (com o tamanho e a voz de cada uma), uma lixeira em cada linha, a limpeza de sobras de histórias apagadas e o botão Apagar toda a voz guardada.
- Apagar uma história do acervo apaga a voz dela junto.
🆓 Voz natural sem chave nenhuma
No computador, abra o site pelo Microsoft Edge e escolha a voz do celular: o Edge traz vozes brasileiras neurais (Francisca, Thalita, Antonio — aparecem com ⭐ na lista), grátis, sem chave e sem espera nenhuma. É a melhor relação qualidade/velocidade para ouvir no PC.
No Android o caminho é outro: o navegador só enxerga o mecanismo padrão escolhido nas Configurações do celular, e só dá para usar as vozes que ele entrega. Então a melhoria vem de instalar um mecanismo melhor e escolhê-lo como padrão:
| Mecanismo | Custo | Offline | Como |
|---|
| SherpaTTS (modelos Piper) | grátis, código aberto | sim | instalar pela loja F-Droid, baixar um modelo pt_BR (ex.: pt_BR-faber-medium) e escolher SherpaTTS como Mecanismo preferido |
| Google (Speech Recognition & Synthesis) | grátis | depende da voz | Play Store → atualizar → Instalar dados de voz → Português (Brasil) |
| Samsung | grátis, já vem | sim | Instalar dados de voz → Português (Brasil) |
| Acapela TTS Voices | pago por voz | sim | Play Store, com prévia antes de comprar |
Depois de trocar o mecanismo, feche o navegador de vez (Configurações → Aplicativos → Chrome/Edge → Forçar parada) — ele guarda a lista de vozes antiga até ser fechado. Aí, no site: Configurações → 📱 Voz do celular → 🔄 Recarregar vozes.
Se a voz nova não aparecer na lista mesmo assim, escolha 🔧 Padrão do aparelho: o site pede "português do Brasil" sem apontar voz nenhuma, e o Android responde com o mecanismo padrão — que agora é o novo. O botão ❓ Instalei uma voz e ela não aparece repete esse passo a passo dentro do site.
Para diagnosticar fora do app existe a página TESTE-VOZ-contador-de-historias.html (abra pelo mesmo endereço do site, trocando index.html pelo nome dela): ela lista tudo o que o navegador enxerga, com mecanismo e idioma de cada voz, e fala com a voz escolhida.
Importante: as vozes "Naturais" do Edge de computador não existem no Android — a Microsoft não as libera para sites no celular. Mesmo com o melhor mecanismo, a voz do aparelho fica abaixo do Gemini; ela é o plano B para quando não há internet ou cota.
📺 Séries com capítulos
Histórias longas, contadas capítulo por capítulo, ficam agrupadas: no acervo aparece um cartão só com o nome da série e quantos capítulos tem. Ao tocar, abre a lista em ordem, com ✓ nos que já foram ouvidos e um botão Continuar do capítulo X.
- Ao terminar um capítulo, o leitor mostra ➡️ Próximo capítulo.
- Nos controles, ⏪ e ⏩ pulam capítulo inteiro; ⏮ e ⏭ pulam trecho.
- A tela Início sugere sozinha o próximo capítulo de qualquer série que esteja no meio.
- Para escrever a continuação: aba Criar → Continuar uma série → escolha a série. A IA lê o capítulo anterior inteiro e continua de onde parou, respeitando nomes e enredo.
- Escrevendo à mão, é só preencher o campo Série com o mesmo nome.
▶️ Continuar ouvindo
Se uma história ficou pela metade, ela aparece numa seção Continuar ouvindo no topo da tela Início, com barrinha de progresso e a porcentagem. Toque e o play retoma exatamente do ponto — mesmo que você tenha trocado de voz no meio do caminho.
Mais abaixo, Ouvidas recentemente lista as que já foram até o fim.
✓ Já lida e retomar de onde parou
- Todo cartão do acervo tem um quadradinho ✓ à direita: marque a história como já lida.
- Os filtros do acervo incluem ⭘ Não lidas, ✓ Já lidas e ★ Favoritas.
- Se você pausar no meio, o site guarda o ponto. Ao reabrir, aparece "⏸ você parou em 45%" e o play continua dali — ou toque em ⟲ começar do início.
- Em séries, o capítulo em que vocês pararam aparece na lista e na tela Início.
Tudo isso fica salvo neste aparelho, junto com as histórias.
🎵 Efeitos sonoros
Dentro do texto da história, um marcador sozinho numa linha aciona o som:
[som:chuva]
Ambientes (tocam ao fundo e somem devagar): chuva, vento, mar, floresta, fogueira, noite.
Momentos (tocam uma vez): trovao, magia, sino, passos, coracao, explosao, tiro, galope.
Bichos (tocam uma vez): latido (cachorro), miado (gato), mugido (vaca), rugido (leão), chiado (cobra), coruja, galo, sapo, elefante.
E fim, que desliga tudo.
Todos são criados pelo próprio site, com síntese de som — não existe nenhum arquivo de áudio no repositório. Por isso os bichos soam estilizados, meio de desenho animado, e não como gravação real. Em Configurações → Efeitos sonoros dá para ouvir os 24 antes de usar.
Os seis primeiros são ambientes — ficam tocando baixinho ao fundo até outro entrar. Os outros tocam uma vez só. A IA já coloca esses marcadores sozinha nas histórias que gera.
💾 Backup e sincronizar entre celulares
As histórias ficam no navegador do aparelho. Para levar para outro:
Levar as chaves para outro aparelho
As chaves ficam guardadas em cada aparelho separadamente — é exatamente isso que impede que elas vazem pelo GitHub. Então, num celular novo, elas não aparecem sozinhas.
Para não digitar tudo de novo: Configurações → 📱 Levar minha configuração para outro aparelho → Copiar o link. Abra esse link uma vez no outro aparelho, confirme, e pronto. O link carrega as chaves, então mande só para você mesmo (o mais prático é o menu do Chrome → Enviar para seus dispositivos). O token do GitHub nunca vai junto.
Jeito simples (recomendado)
- Configurações → Exportar. Baixa o arquivo
historias.json.
- No GitHub, abra o repositório → clique em
historias.json → ícone do lápis → apague o conteúdo → cole o conteúdo novo → Commit changes.
(Ou: Add file → Upload files → arraste o arquivo novo por cima.)
- Qualquer celular que abrir o site pega as histórias automaticamente.
Jeito automático (avançado)
Configurações → Sincronizar direto com o GitHub. Você cola o nome do repositório e um token fine-grained com permissão Contents: Read and write só nesse repositório, e aí um botão envia o acervo direto. O token fica salvo apenas no seu celular.
📁 Arquivos
| Arquivo | O que é |
|---|
index.html | O site inteiro — tudo está aqui dentro. |
historias.json | As histórias que aparecem para todo mundo que abre o site. |
capa.jpg | A imagem grande da tela Início (aparece em todos os aparelhos). |
sw.js | Faz o site abrir sem internet e virar app. Vem do pacote das diretrizes; a cada versão nova o número VERSAO dentro dele sobe (agora v13), para os aparelhos buscarem os arquivos novos. |
icone-180.png | O ícone que aparece quando o site é adicionado à tela inicial do iPhone. (O ícone da aba já vai dentro do index.html.) |
ARQUITETURA.md | O mapa do código: o que cada parte faz, o que não se toca, onde mudar o quê. É o que qualquer IA deve ler antes de mexer. |
TESTE-VOZ-contador-de-historias.html | Página de teste das vozes do aparelho, independente do app. |
fundo-historia.jpg | O cenário que preenche as laterais no computador. Ignorado no celular. |
README.md | Este guia. |
ℹ️ Versão e aviso de uso
Em Configurações → Sobre ficam:
- o número da versão instalada no aparelho (útil para conferir se o arquivo novo já chegou — o navegador às vezes guarda o antigo; nesse caso, recarregue com Ctrl+Shift+R no computador ou puxando a tela para baixo no celular);
- 🆕 Novidades, com o histórico de todas as versões e o que mudou em cada uma;
- 📄 Aviso de uso, com o texto sobre privacidade, dados, chaves de terceiros e direitos autorais.
O site é um projeto pessoal, sem finalidade econômica, sem coleta de dados e sem publicidade. Está marcado com noindex, ou seja, pedindo aos buscadores que não o incluam em resultados de pesquisa.
Feito com carinho, para duas leitoras de 4 e 8 anos. 💜
