Inserir áudio no blog
Existem várias maneiras de colocarmos músicas mp3 ou qualquer outro arquivo de som no blog. Os sons podem ser tocados através de links ou através “displays” elaborados com botões para “play”, ajuste de volume, pausa, etc…
Suas músicas então poderão ser inseridas diretamente no post (usando o editor HTML quando estiver escrevendo um artigo) ou no sidebar do blog, usando widgets (leia:Como instalar um Widget no seu Blog -(Blogger) e Como inserir Widgets no Wordpress sem a instalação de plugins).
Neste artigo vamos mostrar algumas formas simples e bem fáceis para você criar um “display” de áudio e incrementar ainda mais o seu blog…
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 os displays mostrados 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 no Tunes Bag, ou em qualquer outro aplicativo para armazenagem de arquivos em nuvem…
No nosso exemplo, hospedamos os arquivos no servidor do Visual Dicas…
http://visualdicas.com.br/musicas/SinfoniaNo9Beethoven.mp3
http://visualdicas.com.br/musicas/SinfoniaNo9Beethoven.ogg
Usando o display do Google
Para utilizarmos o display do Google, basta copiar o código abaixo e colar no blog. Depois substitua tudo que estiver em vermelho…
<embed type="application/x-shockwave-flash" flashvars="audioUrl=SEU_ARQUIVO.MP3" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best"> </embed>
No nosso exemplo, vamos alterar SEU_ARQUIVO.MP3 pelo arquivo mp3 que hospedamos no nosso servidor. Também vamos alterar o valor de 400 px (largura do display) para 450 px, ficando dessa forma:
<embed type="application/x-shockwave-flash" flashvars="audioUrl=http://visualdicas.com.br/musicas/SinfoniaNo9Beethoven.mp3" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="450" height="27" quality="best"> </embed>
Veja o exemplo abaixo, quando colocamos o código no editor HTML,
Utilizando HTML – elemento embed
Copie e cole o código no seu blog. Substitua o que estiver em vermelho…
<embed autostart="false" width="100px" height="15px" src=”SEU_ARQUIVO.mp3”></embed>
Para o nosso exemplo, vamos alterar SEU_ARQUIVO.MP3 pelo arquivo mp3 que hospedamos no nosso servidor e as dimensões largura de 100 para 450 e 15 para 30px, ficando da seguinte forma:
<embed autostart="false" width="450px" height="30px" src=”http://visualdicas.com.br/musicas/SinfoniaNo9Beethoven.mp3” ></embed>
Funcionando, ficará assim:
Usando HTML5
Como nas formas anteriores, copie e cole o código no seu blog. Depois altere o que estiver em vermelho, colocando os links dos arquivos ogg e mp3.
<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 fica 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:
Bem, existe uma infinidade de plugins e códigos para inserir áudio, mas acredito que estes 3 “displays” que mostramos sejam os mais seguros, mais leves e mais fáceis para instalação… Escolha qual você gostou mais…
Nenhum comentário:
Postar um comentário