Visual Dicas |  |
| Como inserir músicas (áudio) no seu blog… Posted: 11 Apr 2016 05:37 PM PDT Inserir áudio no blogEscrito em 24/06/2012 e atualizado em 09/04/2016Existem 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 oggNeste 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, ou em qualquer outro aplicativo para armazenagem de arquivos em nuvem… No nosso exemplo, hospedamos os arquivos no servidor do Visual Dicas… Usando HTML5O 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.
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 HTML5Para 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.
Veja como ficou o código do nosso exemplo:
E abaixo o exemplo em ação: Autoplay - Rodar o áudio sem mostrar o displaySe você não quiser mostrar o display e desejar que o áudio inicie quando a página é carregada, basta substituir o atributo "controls" pelo atributo "autoplay", ficando o código da seguinte forma:
Agora é só substituir os textos em vermelho pelos arquivos mp3 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.   |
| You are subscribed to email updates from Visual Dicas. To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States | |
Nenhum comentário:
Postar um comentário
Os comentários são muito bem vindos e importantes, pois enriquecem o conteúdo dos artigos.