Visual Dicas

segunda-feira, 18 de abril de 2016

Visual Dicas

Como hospedar arquivos de música gratuitamente

Posted: 17 Apr 2016 04:36 PM PDT

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:

https://sites.google.com/site/servidorvisualdicas/arquivos-musicas/SinfoniaNo9Beethoven.mp3?attredirects=0&d=1

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="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="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

Como inserir códigos HTML nas postagens do Blogger

Como inserir códigos HTML nas postagens do Wordpress

byALF