Player de música no blog com html5 - Como colocar
blog
,
html5
,
musica
,
player
6 comentários
Player de Música
Neste artigo, vamos explicar como inserir música em seu blog através do HTML5.As playlists, quando inseridas no blog, funcionam à base de javascript. Isso, além de deixar o carregamento da página pesada, na maioria das vezes, entra em conflitos com outros Gadgets e Plugins existentes no template.
O Html5 e o PHP servem, justamente, para poupar o template desses scripts, evitar conflitos e deixar o carregamento do seu blog mais leve. Como o Blogger não aceita php, optamos, então, por HTML5. Existe um código simples chamado <embed> que tem a função de incorporação no blog. Através dele, podemos inserir músicas, mapas, vídeos, etc... o que facilita a vida dos Webmasters.
Esqueça java, ajax, php e, principalmente, scripts pesados. A partir de agora, tudo que for incorporado em seu blog, será através do Html5!
Player de música
Existem vários players para você inserir no blog! Alguns através de incorporação <embed> e <iframe>, outros através de scripts, como citamos acima.
Evite inserir scripts em seu blog!
Para começarmos, vamos apresentar um player em html5 muito útil e leve. O nome do site que disponibiliza este player com músicas e vídeos em html5 é cincopa. Este site disponibiliza até 2GB de arquivos para você enviar e inserir na playlist direto do seu computador.
Sem plano de hospedagem, é uma excelente forma de inserir dados.
Para adquirir mais espaço, você pode criar uma conta nova com um player de música novo ou comprar um plano de hospedagem oferecido pelo site.
O player funciona como uma playlist, onde você envia os arquivos de músicas, ele hospeda para para você, cria a lista de músicas e libera o código embed para você incorporar no blog.
Você não precisa inserir links externos para a playlist carregar vários arquivos no Google Drive ou qualquer outro host. Este sistema faz isso automaticamente, e você só irá inserir as músicas que você quiser, a partir do seu computador e depois incorporar ao blog.
Tutorial
Este player é mais leve do que inserir um vídeo do Youtube, e até mais leve que algumas imagens que você insere em seu blog.
O código do player acima foi colocado dentro deste artigo da seguinte forma:
<iframe allowfullscreen="" frameborder="0" height="150" scrolling="no" src="Minha playlist" width="100%"></iframe>
Concordamos que é realmente simples, mas para chegarmos ao código acima é necessário que se faça uma pequena configuração no site que receberá os arquivos com suas músicas preferidas e hospedará de forma simples para você.
O site é em inglês, mas você não terá nenhuma dificuldade em acompanhar nosso tutorial!
Para começarmos, acesse o cincopa.
Ao acessar o site, você será levado até uma tela como a que está abaixo:
Selecione a primeira opção, e em seguida, você será redirecionado para um tela para começar a adquirir seu player. Faça login pelo site ou pelo Facebook:
Você deve clicar na opção "START NOW »" para que você possa escolher o modelo do seu player de música.
Você, também, notará que existe a opção de outros players, porém, os outros players funcionam à base de jquery, e neste artigo, estamos tratando de HTML5, então, sugerimos seguir este post conforme nossa explicação!
Na próxima tela, selecione a opção áudio e escolha o modelo do player de música em HTML5, como na imagem abaixo:
Você irá selecionar o player clicando no botão "USE THIS SKIN" abaixo do modelo que pretende selecionar.
Ao fazer isso, você será redirecionado para uma tela onde poderá editar as cores do player, inserir título na playlist, mudar as cores dos textos, etc...
Todas as modificações no player devem ser feitas nesta etapa!
Ao concluir, você deve selecionar o botão "SAVE & CONTINUE", como na imagem abaixo:
Ao clicar em continuar, você será redirecionado para uma tela onde irá colocar os arquivos que serão exibidos em sua playlist.
Nesta etapa, você irá clicar na opção "CHOOSE FILES(S)..." como na imagem abaixo:
Nesta etapa, você irá clicar na opção "CHOOSE FILES(S)..." como na imagem abaixo:
Ao clicar nesta opção e selecionar as músicas que estão em seu computador, elas começarão a ser carregadas automaticamente:
Quando carregar todas as músicas, você irá selecionar a opção "CONTINUE" e a próxima tela é onde você irá inserir descrição em cada música enviada. As mesmas descrições que irão aparecer no player, inclusive tags e títulos:
Terminando a edição nesta etapa, clique em continuar. O próximo passo é adquirir o player e inserir em seu blog:
Selecione a opção "HTML <embed>", copie o segundo código e cole no Bloco de Notas ou Notepad++ como mostra a imagem acima.
Selecione o trecho do código:
<iframe width="600" height="430"... até </inframe>
Este trecho é o HTML5 que executará sua playlist.
Troque o 640 no trecho do código copiado por 100% e o 430 por 50. Agora, insira em um Gadget, página estática, postagem ou direto no código fonte, que não ocorrerá nenhum conflito de script, e o carregamento do seu blog continuará com o mesmo desempenho.
Este artigo está disponível para publicação em outros blogs ou sites desde que seja seguida a Política do BG
6 comentários :
O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.
Assinar:
Postar comentários
(
Atom
)
Consegui fazer mais ocupa muuuuuuuuito espaço!!!! oq faço?
ResponderExcluirOlá, Bryan! Conseguiu agora?
ExcluirCaramba, procurei como colocar mp3 no blog na internet inteira e não encontrei. Aqui tudo foi tão fácil. Muito obrigado, amigo.
ResponderExcluirQue bom, oldrocker! Fico feliz! Abs
ExcluirAmigo está de parabéns! Obg.
ResponderExcluirpena que agora agora é pago! to usando o podsnack.
ResponderExcluir