segunda-feira, 8 de agosto de 2016

Como Adicionar Script Mp3 Player no Blogger e Wordpress em HTML5

Desde que a conexões com internet se tornou rápida suficiente para tocar sons nos sites, o Flash tem disponibilizado ferramentas para quem quer tocar sons no seu site. Mas o HTML 5 vai mudar a forma que os desenvolvedores tocam sons online. Nesse artigo, vou mostrar como você poderá usar a tag <audio> para tocar sons no seu site.

Usando a tag <audio> para inserir som no seu site 
Nesse exemplo eu carrego um arquivo mp3 e toco ele. Note que o atributo autoplay faz o som ser tocado automaticamente. Esse é o uso mais básico da tag <audio>.
<audio src=”som.mp3” autoplay></audio>

Tocando o som em loop 
Quer tocar um som em loop? O atributo loop está aqui para ajudar você. Você pode usar o atributo autoplay e loop para tocar sons no seu site automaticamente e em loop, porem isso é muito ruim para os usuários.
<audio src=”som.mp3” autoplay loop></audio>

Mostre os controles do <audio> 
Ao invés de tocar som automaticamente, pratica na qual é definitivamente ruim para o usuário, você pode mandar o navegador mostrar alguns controles como por exemplo, volume e botões de play/pause. Isso pode ser feito facilmente, simplesmente adicionando o atributo controls.
<audio src=”som.mp3” controls></audio>

Múltiplos formatos de arquivos 
tag <audio> é suportada pelos navegadores mais modernos, mas o problema é que os navegadores não suportam o mesmo formato de arquivo. Por exemplo, o Safari pode tocar mp3, mas o Firefox não, ao invés ele toca o formato ogg.
A solução para esse problema é usar vários formatos de arquivos.
<audio controls><source src=”som.mp3”><source src=”som.ogg”></audio> 

Especificando MIME types 
Quando utilizamos diferentes formatos de arquivo, uma boa prática é especificar o MIME type de cada arquivo, para ajudar o navegador a reconhecer o formato do arquivo. Isso pode ser feito facilmente, usando o atributo type.
<audio controls><source src=”som.mp3” type=”audio/mp3”> <source src=”som.ogg” type=”áudio/ogg”> </audio>
Fallback para navegadores antigos 
E se o usuário estiver usando o IE6 ou outro navegador pré-histórico sem suporte a tag<audio>?
Um fallback pode ser implementado facilmente, como mostrado abaixo, uma mensagem é mostrada para usuários com navegador que não suportam a tag <audio>.
<audio controls><source src=”som.mp3” type=”audio/mp3”><source src=”som.ogg” type=”áudio/ogg”><p>Seu navegador não suporta a tag audio!</p></audio>
Buffer 
Quando tocamos um arquivo grande, uma boa idéia é fazer um buffer do arquivo. Para fazer isso basta usar o atributo preload. Ele aceita 3 valores:
  • None: para não ser feito o buffer do áudio;
  • Auto: para fazer o buffer do áudio;
  • Metadata: para fazer o buffer apenas dos metadados, como nome do artista, tempo de duração, etc…
<audio controls preload="auto">
 <source src=”som.mp3” type=”audio/mp3”>
 <source src=”som.ogg” type=”áudio/ogg”>
</audio>  

Como Instalar
Procure o local onde deseja inserir o código em sua página HTML.
Cole o código entre a tag <body>.
Atualize a página.

<!DOCTYPE html>
<html>
<body>


<audio controls >
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Seu navegador não suporta o elemento de áudio.
</audio>


</body>
</html>


Gostou? Então compartilhe com seus amigos e se inscreva no Canal no YouTube.

0 comentários :

Postar um comentário

Este blog não é destinado apenas para adultos, portanto não seram admitidos propagandas, linguagem impropria, ofensiva ou obsena que caracterize atitudes evidentes de desrespeito ou grosseria e/ou nada que a desperte curiosidade ou a atenção de menores ou contribuir para que eles adotem valores morais ou hábitos incompatíveis com a menoridade.
As pessoas que inflingir estas regras serão denunciadas ao setor de analize de conteúdo do Google podendo ter sua conta encerrada permanentemente.