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…
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.
<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:
<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…
24 comentários:
Parabéns pelas dicas! Foram muito importantes.
e como coloca com varias musicas?
Amei as instruções
Muito show mano !
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.
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
Como eu faço para fazer no meu android!? AAA, sou deficiente visual total.
Não encontrei uma solução para esse problema. Mas você pode criar um arquivo .mp3 com várias músicas.
Eu segui aa instruções mas o áudio não executa, o que pode estar errado?
Olá Gustavo...
Passe o link dos arquivos de áudio para verificarmos.
É 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?
Brigadoo
Petfoxtroy
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,
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
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...
Olá, o player funciona, porem não consigo navegar no audio que está tocando o maximo que faz é reiniciar.
Olá Studiomaster,
Passe o link da página onde você adicionou o áudio para analisarmos o problema.
Olá, o endereço do meu site é: www.studiomasteroffs.com.br
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.
Vou espermentar
Vou esperimentar
qual é o link que copio? é o compartilhado?
Postar um comentário