Inserir áudio no blog
Escrito em 24/06/2012 e atualizado em 09/04/2016
Existem várias maneiras de colocarmos músicas mp3 ou qualquer outro arquivo de áudio no blog. Sons podem ser tocados automaticamente quando se abre uma página do blog ou através de “displays” elaborados com botões de controle para “play”, ajuste de volume, pausa, etc…
Neste artigo vamos mostrar como inserir players de áudio diretamente no blog de forma fácil, simples e sem precisar de nenhum tipo de plugin externo.
Suas músicas poderão ser inseridas diretamente no post através do editor HTML quando estiver escrevendo um artigo (leia: Como inserir códigos HTML nas postagens do Blogger e Como inserir códigos HTML nas postagens do Wordpress), ou no sidebar do blog (leia: Como instalar um Widget no seu Blog -(Blogger) e Como inserir Widgets no Wordpress sem a instalação de plugins).
Arquivos mp3 e ogg
Neste tutorial, vamos utilizar músicas nos formatos mp3 e ogg.
Se seus arquivos de músicas estiverem em outros formatos, utilize um programa conversor. Leia o artigo Como converter arquivos de áudio que apresenta o excelente programa Free Audio Converter. Faça a conversão dos arquivos de áudio que você irá publicar sempre em mp3 e outra cópia em ogg.
No nosso exemplo, vamos utilizar a 9a. Sinfonia de Beethoven através dos arquivos mp3 e ogg.
Hospedando arquivos de áudio (mp3 ou ogg)
Para utilizarmos o display mostrado aqui, será necessário hospedar suas músicas em servidores na internet.
Se você possui um site hospedado, poderá enviar seus arquivos de áudio para o servidor via FTP (O que significa FTP e para que serve? – recomendo que utilize o software Filezilla).
Se você não possui um servidor ou não sabe com utilizar transferência via FTP, poderá deixar hospedado seus arquivos gratuitamente noGoogle Sites, ou em qualquer outro aplicativo para armazenagem de arquivos em nuvem…
No nosso exemplo, hospedamos os arquivos no servidor do Visual Dicas…
Usando HTML5
O HTML5 trouxe muitas facilidades para os desenvolvedores de sites e blogs. Uma delas é permitir a inserção de áudio diretamente no nosso blog sem a necessidade de plugins externos, que muitas vezes causam problemas de compatibilidade com o browser ou com o sistema operacional utilizado.
A tag HTML5 utilizada para inserir áudio funciona praticamente em todos os navegadores. Entretanto, existe um problema de compatibilidade com o formato do arquivo de áudio utilizado. Veja abaixo uma tabela que mostra a compatibilidade dos formatos de áudio com diferentes navegadores.
ARQUIVO | IE | FIREFOX | OPERA | CHROME | SAFARI |
Ogg Vorbis | não | sim | sim | sim | não |
MP3 | não | não | não | sim | sim |
Wav | não | sim | sim | não | sim |
Para contornar isto, devemos sempre utilizar os dois formatos de áudio, ogg e mp3, para permitir que o display funcione em quase todos os navegadores disponíveis.
Código do display HTML5
Para você utilizar o display HTML5, basta copiar o código abaixo e colar no blog. Depois altere o que estiver em vermelho, colocando os links dos arquivos ogg e mp3.
Obs.: Você também poderá alterar a frase “Seu browser não suporta este áudio”, que deverá aparecer somente em navegadores não compatíveis com os formatos utilizados.
<audio controls="controls">
<source src="SEU_ARQUIVO.ogg" type="audio/ogg" />
<source src="SEU_ARQUIVO.mp3" type="audio/mpeg" />
Seu browser não suporta este áudio
</audio>
Veja como ficou o código do nosso exemplo:
<audio controls="controls">
<source src="http://visualdicas.com.br/musicas/SinfoniaNo9Beethoven.ogg" type="audio/ogg" />
<source src="http://visualdicas.com.br/musicas/SinfoniaNo9Beethoven.mp3" type="audio/mpeg" />
Seu browser não suporta este áudio
</audio>
E abaixo o exemplo em ação:
Autoplay - Rodar o áudio sem mostrar o display
Se você não quiser mostrar o display e desejar que o áudio inicie quando a página é carregada, basta substituir o atributo “controls” pelo atributo “autoplay”, ficando o código da seguinte forma:
<audio autoplay="autoplay">
<source src="SEU_ARQUIVO.ogg" type="audio/ogg" />
<source src="SEU_ARQUIVO.mp3" type="audio/mpeg" />
Seu browser não suporta este áudio
</audio>
Agora é só substituir os textos em vermelho pelos arquivos mp3 hospedados na web. Assim, toda vez que o seu leitor rodar a página onde está inserido o código HTML, automaticamente tocará a música inserida.
