Exportar (0) Imprimir
Expandir Tudo
Web
Expandir Minimizar

HTML5 - 3 maneiras revolucionárias para visualizar HTML5

Konstantin Kichinsky

Microsoft Evangelista Desenvolvedor

Hoje, o HTML5 é como uma série de TV sem nenhuma temporada futura escrita ainda.

Já tem alguns episódios já filmados, algum material bruto que precisa de edição, algumas tomadas aguardando efeitos especiais e muitos, muitos rascunhos. Sim, estou falando de toda a história do HTML5, não apenas da especificação, mas espero que você tenha captado a ideia.

Vou me concentrar em um cenário interessante que não é diretamente coberto pelo padrão HTML5, mas está em demanda alta e é visualmente impressionante. É a visualização de áudio usando HTML5 <audio> assim:

JJ983454.98558DBE412019FCF428337CE0C04C31(pt-br,MSDN.10).png

Em minha analogia da série de TV, a visualização de áudio (especificamente API de baixo nível para acessar um fluxo de áudio) se enquadra diretamente entre rascunhos iniciais e ideias para séries futuras.

O que você pode fazer com <audio>... e o que não pode.

O elemento <audio> em HTML5, como já deve ter adivinhado, não fornece API de baixo nível. Ele permite gerenciar a reprodução de fluxo de áudio em um alto nível: reproduzir e pausar, definir e obter a posição atual na linha do tempo, saber a duração total, trabalhar com trilhas de texto e controlar o volume.

Se você tentar fazer algo mais complexo que reproduzir um único arquivo de música com <audio>—como sincronizar amostras de áudio—perceberá que não é tão fácil quanto gostaria.

Também há limitações em torno de outras tarefas de áudio que você pode querer implementar em seu site:

Como pode ver, depende não apenas da especificação em si, mas também de implementação real em navegadores reais.

Padrões futuros para áudio... talvez

JJ983454.69A5E9237D5B5F83B1DBCA59B012A0A8(pt-br,MSDN.10).png

Está acontecendo uma iniciativa do Grupo de trabalho de áudio do W3C para fornecer a API de baixo nível para fluxo de áudio.

“A API de áudio fornecerá métodos para leitura de amostras de áudio, gravar dados de áudio, criar sons e executar processamento e síntese de áudio no lado do cliente com latência mínima. Ela também adicionará acesso programático ao fluxo de áudio PCM para manipulação de baixo nível diretamente em script”.

Então, talvez algum dia no futuro, veremos uma solução comum baseada em padrões para manipulações de fluxos de áudio.

Enquanto isso, vamos voltar ao mundo real e examinar o que podemos fazer com HTML5 hoje!

Abordagem prática: o que podemos fazer hoje?

Primeiro de tudo, de que exatamente você precisa para criar uma visualização? Precisa de alguns dados que sejam alinhados em tempo hábil com a reprodução de áudio. Pode ser informação textual sobre letras, dados representando níveis de volume ou quaisquer outros dados com que você queira lidar.

Onde pode obter dados? A maneira prática é pré-processamento. É! Tão simples e trivial...

Basicamente, você precisará trabalhar um pouco se quiser visualizar áudio. Analise seu fluxo de áudio primeiro e depois poderá gerar uma visualização sincronizada com o áudio reproduzido ao fundo.

Por exemplo, se quiser extrair dados semanticamente importantes (como a letra de uma música), o pré-processamento é a única solução possível (a menos que você tenha IA suficientemente habilidosa para entender palavras e frases em uma canção).

Geralmente, é uma tarefa manual e tediosa. Você se senta, liga seu player de música, começa a reproduzir uma canção, se lembra de uma linha, pausa, escreve, olha o timer, anota o tempo atual... e faz isso repetidamente. Às vezes, pode simplesmente pegar em algum lugar da Internet.

E o pré-processamento é simplesmente eficiente. Usar essa abordagem poupa recursos computacionais e, consequentemente, reduz a carga no lado do cliente. Isso significa que você deve computar (ou gravar) seus dados para visualização de áudio apenas uma vez, depois simplesmente usa esses dados para fazer sua mágica acontecer quando quiser.

Agora vejamos como isso funciona na vida real...

Lidando com exemplos do mundo real

Para familiarizar-se com todas as ótimas soluções que eu abordarei em um momento, você pode usar as ferramentas de desenvolvedor em seu navegador favorito.  O Internet Explorer fornece ótimas ferramentas para desenvolvedores para esse fim (pressione F12!). Você pode usar o painel Scripts para examinar o código JavaScript, depurá-lo, definir pontos de interrupção ou executar seu próprio código no console.

JJ983454.510EFB677DA4B24D0831D2434393A613(pt-br,MSDN.10).png

Às vezes, você precisará lidar com código compactado (ou minimizado). Nesse caso, pressione "Formatar JavaScript" para torná-lo mais legível.

JJ983454.5FF0F2575560842E5E8550382BBC7477(pt-br,MSDN.10).png

Exemplo nº 1: Chell in the Rain

JJ983454.C15E9CEDFC3A2453C35109C10650ACC2(pt-br,MSDN.10).png

Chell in the Rain é uma visualização áudio-textual impressionante da canção Exile Vilify criada por Matthew Merkle. Você verá que a letra da canção aparece em sincronia perfeita com o fluxo de áudio.

O que está incluído

  • jQuery + Sizzle.js (criando jQuery)
  • jPlayer (uma biblioteca para reproduzir áudio e vídeo)
  • E algum código em que você pode se interessar ;)

Como funciona

A canção é dividida em alguns fragmentos ou intervalos (ou timings) apontando para o início de uma frase ou alguma animação. Todos os timings são armazenados em uma matriz:

  1. var timings = newArray();
  2. timings[0] = 11.5;
  3. timings[1] = 17;
  4. timings[2] = 24;
  5. timings[3] = 29;
  6. timings[4] = 35.5;

Em paralelo, há uma matriz da letra:

  1. var lyrics = newArray();
  2. lyrics[0] = 'Exile';
  3. lyrics[1] = 'It takes your mind... again';
  4. lyrics[2] = "You've got sucker's luck";
  5. lyrics[3] ='Have you given up?';

Agora o tempo atual da reprodução pode ser vinculado com a matriz de timings e disparar um evento correspondente para saltar para a frase seguinte:

  1. if(event.jPlayer.status.currentTime >= timings[currentTrigger] && nolyrics != true) {
  2. fireTrigger(currentTrigger);
  3. currentTrigger++;
  4. }

Em seguida, o gatilho disparado faz algumas animações usando jQuery:

  1. function fireTrigger(trigger) {
  2. switch (trigger) {
  3. case 0:
  4. $('#lyrics1 p').addClass('vilify').html(lyrics[0]).fadeIn(1500);
  5. break;
  6. case 1:
  7. $('#lyrics2 p').html(lyrics[1]).fadeIn(1000).delay(5000).fadeOut(1000);
  8. $('#lyrics1 p').delay(6000).fadeOut(1000);
  9. break;
  10. case 2:
  11. $('#lyrics1 p').fadeIn(1000);
  12. break;
  13. case 3:
  14. $('#lyrics2 p').fadeIn(1000).delay(4000).fadeOut(1000);
  15. $('#lyrics1 p').delay(5000).fadeOut(1000);
  16. break;
  17. case 4:
  18. $('#lyrics1 p').removeClass('vilify').html(lyrics[2]).fadeIn(1000);
  19. break;
  20. case 5:
  21. $('#lyrics2 p').html(lyrics[3]).fadeIn(1000).delay(3000).fadeOut(1000);
  22. $('#lyrics1 p').delay(4000).fadeOut(1000);
  23. break;
  24. ...

É bastante simples e muito eficiente.

Note com que facilidade você pode misturar reprodução de fluxo de áudio e recursos de HTML, CSS e JavaScript!

Exemplo nº 2: Extração de dados de áudio

JJ983454.4B0F1634CBCDD91609226126FFF44513(pt-br,MSDN.10).png

Na postagem de blog Visualizador de música em HTML5 / JS com código-fonte, Grant compartilha sua experiência com visualização de música usando HTML5.

Como o HTML5 não fornece nenhuma API para extrair dados de baixo nível de arquivos de áudio, Grand escreveu um pequeno aplicativo AIR (com amostras) para nos ajudar a extrair os dados de níveis de volume de um arquivo mp3 e depois armazená-los em um arquivo de texto ou em uma imagem.

Ampliados, os dados de níveis de volume têm esta aparência:

JJ983454.20D70EC1D3E8DC235F2973E368906A32(pt-br,MSDN.10).png

Agora, com esta imagem, podemos extrair facilmente todos os dados de que precisamos usando a tela HTML5. (E é muito mais fácil para arquivos de texto—não vou mostrar isso, porque não faz sentido você mesmo ler, já que todos os dados são compactados.)

Para trabalhar com esse tipo de dados pré-processados, Grant também escreveu uma pequena biblioteca JS (VolumeData.js, parte do arquivo .zip que baixei acima).

Para visualizar algo, você precisa carregar os dados primeiro:

  1. loadMusic("music.jpg");

A função loadMusic apenas carrega a imagem

  1. function loadMusic(dataImageURL) {
  2.    image = new Image();
  3.    image.src = dataImageURL;
  4.    playing = false;
  5.    Ticker.addListener(window);
  6. }

Agora, você deve criar um novo objeto VolumeData:

  1. volumeData = new VolumeData(image);

E então, cada vez que atualizar, você pode fazer tudo o que quiser usando dados de média de volume para o tempo atual ou dados separados para cada um dos canais (esquerdo e direito):

  1. var t = audio.currentTime;
  2. var vol = volumeData.getVolume(t);
  3. var avgVol = volumeData.getAverageVolume(t-0.1,t);
  4. var volDelta = volumeData.getVolume(t-0.05);
  5. volDelta.left = vol.left-volDelta.left;
  6. volDelta.right = vol.right-volDelta.right;

Todos os efeitos visuais são feitos com base nesses dados. Para visualização, Grant usa a biblioteca EaselJS. Aqui estão algumas amostras: Star Field e Atomic.

Agora você tem todas as ferramentas de que precisa para fazer visualizações de áudio legais!

Resumindo: Use pré-processamento para tornar sua solução mais eficiente. Tente combinar reprodução de áudio com dados textuais, animações e efeitos gráficos com base nos dados de níveis de volume para criar experiências de usuário cativantes. Faça parecer mágica!

Recursos adicionais e mais informações:

Liberando o poder do HTML5 <audio>, no blog da equipe do IE, descreve os passos básicos e práticas recomendadas para se trabalhar com áudio em HTML.

Amostras neste artigo:

Downloads:

Sobre o autor

Konstantin Kichinsky trabalha na Microsoft Russia como Evangelista desenvolvedor acadêmico com foco especial em HTML5 e IE, e design de aplicativos e experiência de usuário para Windows Phone.  Leia o blog dele aqui.

A Microsoft está realizando uma pesquisa online para saber sua opinião sobre o site do MSDN. Se você optar por participar, a pesquisa online lhe será apresentada quando você sair do site do MSDN.

Deseja participar?
Mostrar:
© 2015 Microsoft