Recentemente assinei o serviço do site kar4oke.com para usar em uma festa, porém percebi que a seleção de músicas é extremamente limitada.

Usando o site normalmente, é bem visível que o player deles não passa de um reprodutor do YouTube, inspecionando a página, percebi que existia uma tag iframe, sem pensar duas vezes, substitui a tag manualmente por uma com o src de outro vídeo, e incrivelmente funcionou.

Ou assim eu pensei, pois assim que o vídeo terminou, não gerou a nota aleatória nem passou para o próximo vídeo.

Após isso, fiz uma extensão (disponível no meu GitHub) que automaticamente substitui o iframe, mesmo funcionando, o resultado foi o mesmo ao terminar o vídeo, sem nota nem autoplay.

Depois de olhar o código e fazer um pouco de engenharia reversa, descobri que por algum motivo existe um iframe com todo o código HTML, como se fosse uma página isolada, e dentro desse frame, um segundo frame com o player, descobri também que posso enviar comandos diretamente usando uma função chamada player.loadVideoById(string)

O código implementado na extensão está assim:

function sendLoadVideoMessage(videoId) {
  const iframe = document.querySelector('iframe[id^="youtube-"]');
  if (!iframe) {
    alert("Iframe do YouTube não encontrado.");
    return;
  }

  const message = JSON.stringify({
    function: `player.loadVideoById("${videoId}")`
  });

  iframe.contentWindow.postMessage(message, "*");
}

Com esse novo código enviando instruções diretamente ao player existente ao invés de o substituir, os problemas de autoplay e geração de nota foram resolvidos

Se você olhar na constante iframe, pode perceber que usei um queryselector para a ID começando com “youtube-“, isso foi feito pois percebi que em alguns momentos o iframe principal tinha ID “youtube-0”, e em outros momentos “youtube-1”, não sei exatamente como funciona, mas provavelmente existem mais IDs. Após alguns ajustes e implementação de drag&drop, disponibilizo essa extensão de navegador extremamente simples que permite injetar qualquer vídeo do youtube no site kar4oke.

Uma outra descoberta é que olhando o tráfego de rede da página de adcionar músicas por QR Code, percebi que ao pesquisar, a API retorna uma lista de músicas, no JSON vem a thumbnail, nome da música, artistas, e um ID numérico da música, e ao clicar para adcionar a música à fila, ele envia uma solicitação com uma instrução de adcionar e o ID da música.

Talvez exista algum motivo técnico, talvez seja apenas para controlar o conteúdo disponível no site, mas ao invés de implementar um banco de dados de IDs numéricos e links do youtube, eu implementaria a busca diretamente pelo youtube (por mais que isso crie a possibilidade de encontrar vídeos que não são karaokê).

Essa experiência mostra como um pouco de curiosidade e engenharia reversa podem revelar o funcionamento interno de plataformas web modernas. Embora o site kar4oke.com limite a seleção de músicas disponíveis, descobri que é possível contornar essas limitações interagindo diretamente com o player do YouTube embutido, preservando funcionalidades como autoplay e geração de notas. Com isso, usuários mais avançados ganham a liberdade de personalizar sua experiência, enquanto mantêm o sistema original funcional. Ainda assim, essa abordagem levanta questões sobre o equilíbrio entre controle de conteúdo, experiência do usuário e liberdade de uso — algo que toda plataforma fechada precisa considerar ao definir suas limitações técnicas.

Entrei em contato com a empresa perguntando se eles tinham interesse em implementar essa função, e me ignoraram. A extensão tá no meu GitHub pra vocês usarem a vontade.