Crie seu próprio Teremim Virtual (WebCam + Web Audio + MediaPipe)

Description

O que é
Um teremim virtual em HTML/CSS/JS que usa a câmera para rastrear sua mão (MediaPipe Hands) e a Web Audio API para gerar som em tempo real. A posição da ponta do dedo indicador controla frequência (X) e volume (Y), criando uma experiência musical interativa e lúdica.

Principais recursos

• Detecção de mão em tempo real (MediaPipe Hands, via CDN).

• Geração de áudio com oscilador senoidal (Web Audio API).

• Visualização no canvas com landmarks e conexões da mão.

• Modo seguro: se a mão some, o volume zera automaticamente.

• Botão “Clique para iniciar áudio” (compatível com políticas de autoplay do navegador).

Por que é útil em sala
Integra programação, física do som (frequência/amplitude), música e IA aplicada à visão computacional. Excelente para projetos STEAM, feiras de ciências e demonstrações de interfaces naturais.

Como funciona

• A webcam fornece os frames.

• O MediaPipe detecta 21 pontos da mão; usamos o landmark 8 (ponta do indicador).

• x (0→1) mapeia a frequência de ~200 a ~1200 Hz.

• y (0→1) mapeia o volume (topo alto → base silencioso).

• O canvas exibe a mão com pontos e conexões.

Requisitos

• Navegador moderno (Chromium/Firefox/Edge).

• Permissão para câmera e áudio.

• Servir a página via HTTPS ou localhost.

  Importante: execute a partir de um servidor local (ex.: VS Code Live Server) — acessos a câmera/áudio não funcionam corretamente via file://.

Passo a passo (rápido)

1. Crie uma pasta e salve o arquivo index.html com o código do projeto.

2. Abra a pasta no VS Code e inicie o Live Server (ou outro servidor local).

3. Acesse http://localhost:xxxx, clique em “Clique para iniciar áudio” e conceda as permissões.

4. Mova a mão diante da câmera:

   • Esquerda ↔ Direita: altera a frequência (grave ↔ agudo).

   • Cima ↔ Baixo: altera o volume (mais alto ↔ silencioso).

Conteúdo do arquivo

• HTML da página (estrutura e textos).

• CSS básico (tema escuro; canvas com borda amarela).

• Importação via CDN de @mediapipe/hands, drawing_utils e camera_utils.

• JS para áudio (AudioContext, Oscillator, GainNode), captura da câmera, mapeamento dedo→som e renderização no canvas.

Sugestões de extensão

• Trocar a forma de onda (sine, square, sawtooth).

• Quantizar frequência para escalas musicais (maior, pentatônica).

• Adicionar reverb/delay (convolução ou feedback delay).

• Mudar o controle: frequência em Y e volume em X, ou usar distância dedo-polegar como volume.

• Exibir um afinador simples (nota + cents).