Ferramentas · No ar
Wave Radio
Um rádio retrô com cinco estações de vídeo.
Rádio de madeira e latão no navegador: gire a sintonia, aperte as teclas e ouça Lofi, Vaporwave, Synthwave, Chillwave e Millionairewave, com som em cada botão.
Sobre o projeto
O que é o Wave Radio
O Wave Radio é um rádio retrô que toca vídeos do YouTube. Tem gabinete de madeira, alto-falante de latão, mostrador iluminado com ponteiro, teclas de piano, botões giratórios e uma tela de TV onde o vídeo aparece. Ao ligar, a luz do mostrador esquenta devagar e o ponteiro varre a faixa até a estação.
São cinco estações: Lofi, Vaporwave, Synthwave, Chillwave e Millionairewave. Cada uma tem a sua frequência, a sua cor de luz e três vídeos escolhidos a dedo e fixos no código, entre mixes longos e rádios ao vivo. Quando um vídeo termina, o rádio passa para o próximo da mesma estação.
Tudo faz barulho: as teclas dão um clac, os botões giratórios têm dentes, a chave de liga/desliga dá um tranco e, ao trocar de estação, o chiado de rádio cobre o tempo de carregar o vídeo até a sintonia fechar. Os sons são sintetizados na hora, sem nenhum arquivo de áudio.
Recursos
O que o Wave Radio faz
Cinco estações
Lofi, Vaporwave, Synthwave, Chillwave e Millionairewave, cada uma com a sua frequência no mostrador e a sua cor de luz.
Vídeos escolhidos a dedo
Três vídeos fixos por estação, entre mixes longos e rádios ao vivo. Se um acabar ou não puder ser exibido, o rádio segue para o próximo da estação.
Chiado de rádio de verdade
Ao trocar de estação, o ponteiro anda pelo mostrador e a estática cobre o carregamento do vídeo, até a estação entrar na sintonia.
Som em cada botão
Teclas, botões giratórios, chave de liga/desliga e sintonia têm efeitos próprios. Um botão no painel liga e desliga os efeitos.
Botões que giram
Arraste, use a roda do mouse ou as setas do teclado para ajustar o volume e girar a sintonia. As teclas de piano levam direto a cada estação.
Leve até você ligar
O player do YouTube só é carregado quando o rádio é ligado. Antes disso a página não pede nada ao YouTube.
Também no celular
Em telas pequenas as teclas sobem para o alto do painel e os botões ficam em uma fileira só, com áreas de toque confortáveis.
Lembra de você
A última estação, o volume e a escolha dos efeitos ficam salvos no navegador. O rádio sempre abre desligado, sem tocar sozinho.
Tecnologias
Por dentro do Wave Radio
lite-youtube-embed
A biblioteca de Paul Irish (versão 0.3.4, licença Apache 2.0) entrega o player do YouTube só quando o rádio é ligado, e a página abre leve. Os arquivos ficam no próprio servidor, em public/vendor.
API do player do YouTube
Com o atributo js-api, o lite-youtube devolve o player da API do YouTube. É por ele que o rádio controla o volume, troca de vídeo sem recarregar o iframe e descobre quando um vídeo termina ou não pode ser exibido.
Web Audio API
Os sons (clac das teclas, dentes dos botões, tranco da chave, chiado entre estações e o ding da sintonia) são sintetizados na hora com ruído filtrado e osciladores. Não há arquivo de áudio.
CSS no painel
Madeira, latão, mostrador iluminado, olho mágico e a tela com chuvisco são só CSS: gradientes, @property para animar cores e ângulos, container queries e transform para o ponteiro.
Vídeos conferidos por script
O comando npm run radio:check consulta o oEmbed do YouTube e avisa se algum vídeo foi apagado, ficou privado ou teve a incorporação desativada.
Node, Express e Eta
A mesma base do resto do portfólio, sem etapa de build. As estações, as frequências e os vídeos vivem em um arquivo só.
FAQ
Perguntas frequentes
Os vídeos são seus?
Não. Eles pertencem aos seus criadores e tocam pelo player do YouTube. O painel mostra o título e o canal de cada vídeo, com um link para abrir no YouTube.
Por que o rádio não toca sozinho?
Para respeitar quem abre a página: ele começa desligado e só toca depois que você liga. Os navegadores também só permitem som depois de um toque ou clique.
O vídeo não começou. E agora?
Se o navegador segurar o início automático, o rádio avisa e basta tocar na tela. Se aparecer "Sem sinal por aqui", confira a internet ou o bloqueador de anúncios e use o botão Tentar de novo.
Dá para escolher o vídeo?
Cada estação tem três vídeos e o botão Próxima pula de um para o outro. Quando um termina, o rádio segue sozinho. A lista fica fixa no código.
Como são feitos os sons?
São sintetizados no navegador com a Web Audio API, a partir de ruído e de tons. Não há arquivo de áudio, e o botão Efeitos desliga todos eles sem mexer no volume da música.
Os vídeos podem sair do ar?
Podem, como qualquer vídeo de terceiros. Quando acontece, o rádio pula para o próximo da estação, e um script do projeto confere a lista quando quiser.
Continue explorando
Veja também
Mercado Helper
Listas de compras para usar no celular: marque o que foi para o carrinho, veja o total e consulte o histórico.
Ver projeto No arShareSoFast
Compartilhe um arquivo de até 25 MB por um link curto, com senha e uma carta opcional. Depois de 1 dia, tudo é apagado de verdade.
Ver projeto No arMega Generator
Gerador de dados fictícios: CPF, CNPJ, pessoas, empresas, vagas, posts e esquemas personalizados em JSON, para testes e protótipos.
Ver projeto