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

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, podemos utilizar os dois formatos de áudio, ogg e mp3, para permitir que o display funcione em quase todos os navegadores disponíveis (modernos e antigos).

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 mp3 e/ou ogg.

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>

Observação 1: Você poderá optar apenas pelo link do arquivo MP3, que é compatível com todos os navegadores modernos. O uso de dois links pode ser útil para navegadores mais antigos.

Observação 2: Você também poderá inserir a frase “Seu browser não suporta este áudio”, que deverá aparecer somente em navegadores não compatíveis com os formatos utilizados.

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.

Leia também: Como inserir vídeos no seu blog…

byALF

24 comentários:

Bans disse...

Parabéns pelas dicas! Foram muito importantes.

Kanoe disse...

e como coloca com varias musicas?

Bimmer-Musik 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-guitar 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

Cristiano Chagas disse...

Como eu faço para fazer no meu android!? AAA, sou deficiente visual total.

Matheus Alexandre disse...

Não encontrei uma solução para esse problema. Mas você pode criar um arquivo .mp3 com várias músicas.

Ghuma disse...

Eu segui aa instruções mas o áudio não executa, o que pode estar errado?

Visual Dicas disse...

Olá Gustavo...

Passe o link dos arquivos de áudio para verificarmos.

Renato Nascimento disse...

É necessário sempre colocar o link de ambos os arquivos OGG e MP3? Terei sempre que fazer uma cópia ogg do arquivo mp3, ou posso copiar e colar apenas parte código?

Blogger disse...
Este comentário foi removido por um administrador do blog.
petfoxtroy disse...

Brigadoo

Petfoxtroy

byALF disse...

Olá Renato,

Não é preciso colocar os dois links. O uso dos 2 links é para uma maior abrangência de navegadores mais antigos. Atualmente, todos navegadores são compatíveis com MP3. Portanto, você poderá utilizar tranquilamente apenas o link do arquivo MP3.

Atenciosamente,

CAROL RIBEIRO disse...

Consegui seguir os passos e inserir. Até aí; lindo!!! Obrigada pela ajuda. Mas tem um problema: se eu PAUSAR, quanto tento retomar o áudio volta do começo; além disso está demorando um pouco para carregar. Será que fiz alguma coisa errada? Ou é assim mesmo!
Caso queiram ver do que eu to falando:
http://www.carolcombina.com.br/2017/11/10-musicas-nacionais-com-letra-para.html

Visual Dicas disse...

Olá Carol,

Verifiquei os áudios no seu blog e funcionou perfeitamente, tanto no Chrome como no Firefox. Qual navegador você está utilizando? Talvez a versão não esteja atualizada...

studiomaster disse...

Olá, o player funciona, porem não consigo navegar no audio que está tocando o maximo que faz é reiniciar.

byALF disse...

Olá Studiomaster,

Passe o link da página onde você adicionou o áudio para analisarmos o problema.

studiomaster disse...

Olá, o endereço do meu site é: www.studiomasteroffs.com.br

Kely Sara disse...

Toques para celular são muito amados e usados ​​no site Toqueparacelular.net, um lugar de prestígio e oferecem muitos toques e muitas categorias para você escolher.

Kanhanga Promove a Banda disse...

Vou espermentar

https://www.TheRealMusicso9dades.com disse...

Vou esperimentar

Anônimo disse...

qual é o link que copio? é o compartilhado?

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Fique mais.... Leia os nossos artigos!!!

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Web Analytics