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.
Oi Rafa!
ResponderExcluirPassei pra deixar um beijo, te desejar um lindo final de semana!!
Planeta da Blogueira
Depende, se a musica estiver em MP3 o firefox não consegue 'ler'.
ResponderExcluirPara 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.
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
ExcluirFunciona 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.
ResponderExcluirNã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.
Ta mas e se eu quiser usar uma playlit?
ResponderExcluirBoa pergunta Diego, creio que deve haver algum complemento, mas não que eu saiba. Se souber, certamente complementarei o artigo. Agradeço o questionamento
Excluire para alterar a largura, como faço?
ResponderExcluirOlá 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