Escrito originalmente em 16/04/2016 e atualizado em 05/02/1017
Arquivos de áudio
Para você ouvir ou compartilhar músicas na internet é necessário a utilização de arquivos de som, ou seja, um tipo de arquivo que possibilita o armazenamento digital de áudio. Abaixo mostraremos os formatos de arquivos mais utilizados atualmente:
MP3 - Formato mais conhecido pelos usuários. É importante por reduzir o tamanho natural de uma música em até 90%.
WMA - Formato semelhante ao MP3, foi criado pela Microsoft e se consagrou como a extensão especial para o Windows Media Player. Atualmente todos os players reproduzem este formato normalmente.
OGG - Embora menos conhecido pelos usuários, esta extensão está sendo largamente utilizada em streaming, que é a transmissão direta da internet para o computador ou smartphone em tempo real. O formato OGG não precisa ser previamente carregado para reproduzir a música.
WAV- Formato adotado e utilizado apenas pelo Windows. Não pode reproduzir sons em players de áudio ou aparelhos de som por exemplo.
AAC - Criado pela Apple para concorrer com o WMA ou o MP3.Pode ser reproduzido em iPods e similares, além de players para computadores ou smartphones.
AC3 - Formato com qualidade Dolby Digital, com diversas saídas de áudio que cria a sensação de imersão que percebemos ao reproduzirmos sons em home theaters.
Para podermos reproduzir músicas em blogs ou sites, precisamos primeiro hospedar os arquivos de áudio na internet. A seguir, mostraremos como hospedar estes arquivos no Google Sites (espaço gratuito até 100 MB) e como utilizá-los no seu blog.
Utilizando o Google sites como servidor de arquivos
Como já mostramos no artigo “Usando o Google Sites como servidor de arquivos para blogs e sites” podemos também armazenar arquivos de áudio de forma semelhante:
Acesse o site: Google Sites
Se você não estiver logado no Google, entre com o seu E-mail e Senha e clique em [Fazer login].
Clique no botão [Criar]. No nosso exemplo vamos criar um site apenas para atuar como um servidor de arquivos.
Defina o modelo (para o nosso servidor, escolhemos Modelo em branco). Atribua um nome para o seu site (escolhemos servidorvisualdicas), o nome deverá ser inédito. Se desejar defina um tema para o site em Selecionar tema e digite o código de segurança.
Depois de definidos todos parâmetros clique no botão [Criar].
Obs.: Se desejar utilizar o Google Sites para criar um site bem bacana, leia Como fazer um site de maneira rápida, fácil e gratuita.
Aguarde alguns instantes e você terá acesso ao seu novo site.
No menu superior, clique no botão para criar uma nova página (ou digite apenas a tecla de atalho “C”).
De um nome para a página e clique no botão [Criar]. No nosso exemplo chamamos a página de “Arquivos Músicas”.
Clique em [Salvar] para criar a página
Pronto, agora você poderá adicionar seus arquivos. Clique em [Adicionar arquivos].
Selecione o arquivo de áudio desejado no seu computador. No nosso exemplo escolhemos os arquivos: SinfoniaNo9Beethoven.mp3 e SinfoniaNo9Beethoven.ogg
Obs.: Você poderá enviar qualquer tipo de arquivo para o seu site servidor, totalizando no máximo 100 MB (plano gratuito).
Aguarde alguns instantes e pronto. Seu arquivo já está hospedado.
Para fazer o download do arquivo clique na seta para baixo.
Para deletar o arquivo, clique em [ X ].
Você pode criar um sistema de downloads de músicas no seu blog. Leia o artigo Como criar um sistema de download no seu Blogger
Obtendo o link direto dos arquivos de áudio
Para reproduzir músicas em sites ou blogs através de players (controles) ou automaticamente quando a página é carregada (autoplay), é necessário ter acesso ao link direto do arquivo hospedado.
Para se obter o link direto no site servidor que criamos, basta clicar com o botão direito do mouse sobre a seta de dowonload do arquivo de áudio desejado swf e selecionar [Copiar link].
Para tornar o link copiado em link direto, retire o atributo “?attredirects=0&d=1”
https://sites.google.com/site/nomedosite/nomedapagina/audio.mp3?attredirects=0&d=1
No nosso exemplo o link copiado ficou:
Retiramos o atributo “?attredirects=0&d=1” e o link direto ficará:
https://sites.google.com/site/servidorvisualdicas/arquivos-musicas/SinfoniaNo9Beethoven.mp3
Vamos fazer o mesmo para o outro arquivo com formato ogg, ficando:
https://sites.google.com/site/servidorvisualdicas/arquivos-musicas/SinfoniaNo9Beethoven.ogg
Colocando o player no site ou blog
No nosso tutorial vamos utilizar o display nativo da linguagem de programação HTML5. Se desejar, você poderá utilizar outros controladores de áudio usando plugins externos disponíveis na internet.
Para inserir o player HTML5, basta você copiar o código abaixo e colar no blog. Depois altere o que estiver em vermelho, colocando os links dos arquivos ogg e mp3 hospedados no Google Sites.
<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="https://sites.google.com/site/servidorvisualdicas/arquivos-musicas/SinfoniaNo9Beethoven.ogg" type="audio/ogg" />
<source src="https://sites.google.com/site/servidorvisualdicas/arquivos-musicas/SinfoniaNo9Beethoven.mp3" type="audio/mpeg" />
Seu browser não suporta este áudio
</audio>
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. (Para saber mais, leia o post Como inserir músicas (áudio) no seu blog…)
Veja abaixo o nosso exemplo em ação:
Se você tiver dúvidas como colar o código HTML no seu blog (nas postagens, usando o editor html, ou nos gadgets no sidebar do blog), leia os artigos:
Como instalar um Widget no seu Blog -(Blogger)
Como inserir Widgets no Wordpress sem a instalação de plugins
Autoplay - Reprodução automática
Se você deseja que a reprodução do áudio se inicie automaticamente, basta acrescentar o atributo “autoplay” no código HTML. Copie o código abaixo e cole no seu blog.
<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>
Altere o que estiver em vermelho, colocando os links dos arquivos ogg e mp3 hospedados no Google Sites. A reprodução do áudio se iniciará automaticamente assim que você abrir a página…
Atenção: Este atributo não é suportado pelo Internet Explorer.
Para saber mais leia: Como inserir músicas (áudio) no seu blog…
24 comentários:
Valeu amigo, muito obrigado, me salvou (:
E se quiser, ter o melhor da música ao seu alcance, acesse nosso site: www.jacobproducoes.com.br
é nois, valeu.
E obrigado, mais uma vez
Porque quando eu publico dá certo mas logo após algum tempo não dá mais? eu posso publicar músicas que eu baixei diretamente do youtube?
Olá Bler mizzi,
Passe o link da página publicada para verificarmos...
Aguardo.
www.blercontos.com.br/2016/12/puf.html é esse, porém a música não toca, só tocou logo após que eu postei
Olá Bler mizzi,
Abri seu link e obtive a mensagem:
Seu browser não suporta este áudio [...]
Isto significa que você colocou um áudio com extensão não identificada pelo browser.
Leia este artigo: Como inserir músicas (áudio) no seu blog…
Olá, eu acessei o artigo, porém continua a mesma coisa, funciona quando eu coloco mas alguns minutos depois não funciona mais, quando você diz que coloquei um áudio com extensão não identificada pelo browser quer dizer exatamente o que? hospedei como explicado, no google sites, o que pode ser?
Olá Bler Mizzi,
me passe o link do google sites para eu acessar o arquivo de música, ou se deseja, envie o arquivo como anexo no e-mail: angelo.alf@gmail.com
Vou fazer uma simulação colocando a música no meu blog de teste para verificar porque não está funcionando.
Obrigado!
Por favor, como faço pra ativar o autoplay?
Obrigado.
Olá Missionária Mércia,
Basta colocar o atributo "autoplay" após controls. Fizemos uma atualização do post onde mostramos como utilizar o autplay.
NO ANDROID O ÁUDIO NÃO FUNCIONA.
Que arquivo OGG é esse? Eu segui tudo e hospedei a música, mas não tenho arquivo OGG
Olá Carol,
Utilize apenas o arquivo mp3 que funcionará em todos navegadores modernos. O arquivo 0gg é um outro tipo formato para áudio.
Obrigado, ajudou muito.
Fiz o upload dos audios mas o player aparece apagado no site, não tem audio, testando audio numero 16 do site www.studiomasteroffs.com.br
Olá studiomaster...
Reveja os códigos que deve ter ocorrido alguma divergência no script. Interessante que no navegador Chrome a página está perfeita.. mas dá alguns problemas no Firefox...
Cheque os códigos novamente, pois deve ter algum erro, falta de <> em alguma linha por exemplo...
Studiomaster,
Vi o código fonte do seu site e em algumas linhas de comando tem o erro ....OCUTOR%20-LEON.mp3">> - Observe que tem um símbolo de maior a mais...
Tirei o simbolo a mais e testei de varias formas mais os audios hospedados no Google sites não entram (no computatador que estou logado no blogger.com onde foi criado o site funcionam normal mas em outro pc não logado o player fica apagado)
Queria usar os arquivos do google sites porque fornecem mais expaço para hospedagem.
Texte agora no audio 12 (Vozes femininas)
Amigo, eu gostaria de saber como conseguir um link direto para compartilhar, já que o áudio está hospedado! Poderia me ajudar?
Olá Inglês de verdade...
É só você dar o caminho de onde o arquivo está hospedado. Veja um exemplo:
http://www.visualdicas.com.br/musicas/SinfoniaNo9Beethoven.mp3
como não permitir o download ?
Ola Alguem poderia me informar algum codigos para que as faixas tocam a proximas
Toques para celular são fornecidos no Toqueparacelular.net .Ringtones engraçados, toques para iPhone, toques whatsapp, toques samsung são baixados gratuitamente e ilimitado.
Valeu pelo tutorial. Agradeço de coração!
Postar um comentário