.


COMO INSERIR MUSICA (AUDIO) NO BLOOG

10/07/2012 13:03

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 mais:
Como instalar um Widget no seu Blog -(Blogger)
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

Se seus arquivos de músicas estiverem em outros formatos, utilize  um programa conversor.
Leia mais:
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.

Leia mais:
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…

accepted_48

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">

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:

accepted_48

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…

accepted_48

SEU_ARQUIVO.mp3”>

 

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:

accepted_48

http://visualdicas.com.br/musicas/SinfoniaNo9Beethoven.mp3” >

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 mp3.

accepted_48

 

 

Veja como fica o código do nosso exemplo

 

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…

 

Fonte: Clique aqui!

 

 

—————

Voltar