Player de música em HTML5

quarta-feira, 22 de agosto de 2012


Falei sobre músicas no blog antes, em outros artigos, mas nada se compara ao que hoje existe: HTML5. Pra quem não sabe o HTML5 é evolução do HTML somente. Não existe só HTML e sim uma vasta relação de linguagens (ou tecnologias) para a web como o XHTML e HTML DOM. O que diferencia um do outro é a funcionalidade que cada linguagem tem e isso traz muita diferença na hora de programar e de ver a página.

A chegada do HTML 5 proporcionou um avanço nos navegadores (Internet Explorer, Mozila Firefox, Safari, Google Chrome e otros) em muitos sentidos. Um bom exemplo desta evolução é que no artigo ‘Inserir música na página ou blog com o Yahoo Player’ eu falo da necessidade de inserir códigos que chamam o plugin do Yahoo para fazer funcionar o player na nossa página e com o avanço do HTML5 esses códigos para plugin não existem ou seja, diminuição de códigos gera um carregamento de página ainda mais rápido entre outras coisas.

Para fazer o navegador entender que se trata de uma música, basta colocar a tag <audio> (para som ou música). Se você usa o Blogger, então poderá inserir essas linhas de códigos no local que desejar aparecer o player:
<audio controla controls>
<source src="http://caminho.da.internet.mp3">
Seu navegador não suporta a tag audio.
<audio>


A primeira linha pode sofrer alterações para controle da mídia como por exemplo:

<áudio Controla autoplay> ou <áudio Controla loop> 

O Autoplay reproduz a música quando o código é interpretado pelo navegador e a música está pronta ou quando você clica no botão Play (mas eu não confio muito nisso, então faça um teste em sua página).
O Loop é quando você entra no site, viu que tem um player e depois que aperta o botão PLAY, a música só vai parar quando você apertar no botão STOP ou fechar a janela.

QUANDO O USO DO PLAYER É INDICADO?
Em casos onde há podcast, mostra de músicas (30 segundos) ou sons para exemplos.

COMO INSERIR DENTRO DE UMA POSTAGEM?
No editor de texto do blog, mude a forma de editar para a forma HTML e insira os códigos lá. Não se esqueça de EDITAR o caminho do áudio que deve ser de sua autoria ou ter a autorização para ser reproduzida em público, conforme os órgãos competentes. O código a ser mudado é http://caminho.da.internet.mp3

COMO INSERIR O PLAYER NA COLUNA DO MEUB LO BLOG?
Se for BLOGGER: Escolher o blog desejado. Clicar no menu lateral em Layout e adicione um novo Gadget de HTML/JavaScript e adicione seu código em HTML5. 
Se seu blog for UOL ou outros, verifique como chegar à coluna lateral de seu blog seja manualmente pelo HTML na íntegra ou ainda por divisões feitas pela plataforma como ocorre no Blogger ou WP via painel.

COMO ENCONTRAR MÚSICAS OU ARMAZENAR NA WEB?
Não basta só colocar música do site de vídeos. Não tem como na verdade, então para conseguir armazenar música na web você tem que usar algum serviço de hospedagem de arquivo como um host dedicado ou Dropbox, ou ainda o SkyDrive da Microsoft e obter a música em formato mp3 com o seu código na web (toda música e arquivo depois que está na web tem um código único)

POSSO COLOCAR UMA MÚSICA DO MEU COMPUTADOR?
Não. Tudo o que se desliga não estará na rede depois de desligado (até eu achei meio estranho a frase rsrsrs) mas em outras palavras, se seu computador conseguir ficar ligado todos os dias do ano então poderá colocar a música do seu computador no seu blog, só não me pergunte como será o código da sua música (e a conta de luz chegará mais caro).

ESTE CÓDIGO SEMPRE FUNCIONA?
Não. Como o HTML5 ainda não é uma obrigação para nenhuma empresa então os navegadores podem não entender tudo o que há na página como ocorre muito entre o IE e o MF e isso explica a linha ‘seu navegador não suporta a tag audio’ além de você manter um plano B para estes casos.
Ressalto que o HTML5 é suportado pelos navegadores Internet Explorer 9, Firefox, Opera, Chrome e Safari.

9 comentários:

  1. Oi Rafa!
    Passei pra deixar um beijo, te desejar um lindo final de semana!!


    Planeta da Blogueira

    ResponderExcluir
  2. Depende, se a musica estiver em MP3 o firefox não consegue 'ler'.
    Para que seja compatível com diversos navegador é bom incorporar o mesmo arquivo em diferentes formatos, como .mp3 e .ogg este segundo compatível com o firefox.

    Se não me engano só o chrome esta lendo o mp3 no momento.

    ResponderExcluir
    Respostas
    1. Obrigado pelo complemento Phellipe. Fiz um teste agora com o link desta postagem que fiz no passado e o MF reproduziu o MP3 normalmente na versão 4.0 Ainda assim, sei que há limitações entre navegadores. Toda atenção é pouco

      Excluir
  3. o fera, pq no codigo tem => Seu navegador não suporta a tag audio.

    eu apaguei isso ai e funciona ainda.

    responde ai.

    bateu uma curiosidade.

    Falow...

    ResponderExcluir
    Respostas
    1. Funciona como uma condição: SE o navegador der suporte ao HTML5 então ele tocará a música e ocultará a linha que diz não suportar a música. Caso o navegador for antigo e/ou não der suporte ao HTML5 então o recurso não funcionará e apresentará a mensagem. Isso evita que o leitor fique esperando algo que pode não chegar.
      Não está errado o que você fez, mas se o leitor/ visitante do site não usar um navegador que leia o HTML5 então ele vai ficar esperando alguma coisa que não vai chegar e ficará frustado, possivelmente não voltará no site ou página.

      Excluir
  4. Respostas
    1. Boa pergunta Diego, creio que deve haver algum complemento, mas não que eu saiba. Se souber, certamente complementarei o artigo. Agradeço o questionamento

      Excluir
  5. Respostas
    1. Olá Leonardo este é um código simples parra uso do HTML5 e não há muitas edições. No caso não é possível mas o comando 'width' em outros códigos indica largura. Na sintaxe que foi apresentada aqui, não tem um local específico para que a largura seja colocada no código.

      Excluir

Use este espaço para perguntar, questionar ou dar algum complemento sobre o artigo em questão. Todos os comentários publicados no Arruma Blog são de inteira responsabilidade dos seus respectivos autores. A finalidade do comentário é proporcionar ao leitor o poder de resposta sobre a postagem apenas. Neste campo não será aprovado comentários para publicar link e/ou material com conteúdo pornográfico de qualquer espécie, discriminatório ou ofensivo de qualquer natureza; que enviar informações sobre atividades ilegais e/ou incitar crimes ou violência. Para finalidades comerciais ou contato direto com o autor damos a opção de 'entrar em contato no topo da página'.

É expressamente proibido utilizar o espaço de comentários para engajar-se em atividades de cunho comercial, como vender produtos, procurar anunciantes e patrocinadores, divulgar informações pessoais de contato, além de veicular banners de qualquer espécie. Também serão apagados comentários de auto-promoção ou que não sejam pertinentes ao artigo em questão.

Todos os comentários são moderados e poderão ser excluídos caso sejam considerados inadequados, ofensivos ou alheios ao objetivo do blog. Este é blog é protegido pela lei de direitos autorais vigente no Brasil.


















 
Arruma Blog © 2009 - 2013 | Desenhado por Bubble Shooter | Direitos reservados | Obrigado pela visita