PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Publicidade:

Encontre no blog...

04/02/2017

Como inserir músicas (áudio) no seu blog…

 audio_icon

Inserir áudio no blog

Escrito em 24/06/2012 e atualizado em 04/02/2017

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 no Google Sites (leia: Como hospedar arquivos de música gratuitamente), 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 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

sim

sim

sim

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.

accepted_48

<audio 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>
  <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 automaticamente

Se você desejar que o áudio inicie automaticamente quando a página é carregada, basta acrescentar o atributo “autoplay”, ficando o código da seguinte forma:

accepted_48

<audio controls 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 e ogg 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.

byALF

8 comentários:

Lucas disse...

Replicas de Relogios Importados
Replicas Rolex
Replicas de Relogios Masculinos
Replicas Tissot
Replicas Omega

Joseluizbans disse...

Parabéns pelas dicas! Foram muito importantes.

Origami Tobiichi disse...

e como coloca com varias musicas?

Musik-Bimmer disse...

Amei as instruções

Biscoito legal disse...

Muito show mano !

Gilmar de Oliveira disse...
Este comentário foi removido pelo autor.
Gilmar de Oliveira disse...

Eu gostei muito desse player porque funciona até em aparelho celular, mas é uma pena que não tem como mudar a cor do player e nem diminuir o tamanho.

Rambo disse...

Parabéns pelo post, ótimo e detalhado, já estou tirando proveito das dicas e usando no meu blog de musicas instrumentais que gravo, ramboguitar.blogspot.com

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More