Visual Dicas

domingo, 10 de maio de 2015

Visual Dicas

Widget com player para ouvir músicas no seu blog

Posted: 09 May 2015 02:13 PM PDT

Widget com player para ouvir músicas no seu blog - Visual Dicas

Player de músicas no blog

Existem vários aplicativos e códigos para colocar músicas streaming em blogs ou sites, mas não achei nenhum tão bom como o grooveshark.com que atualmente foi desativado da web por problemas com as gravadoras – ~~uma pena~~.

Para substituí-lo, encontramos o Deezer, que também possui plano gratuito, tem uma quantidade imensa de músicas disponíveis (milhares), é totalmente legal, pois não fere os direitos autorais, segundo a política de funcionamento do site (o widget não permite o download das músicas, mas apenas a reprodução delas com a licença e a responsabilidade do Deezer).

O único problema é que no plano gratuito, o Deezer exige que o leitor do seu blog se cadastre no aplicativo e esteja logado no momento em que for ouvir músicas do seu player de reprodução. Caso contrário o leitor só poderá ouvir músicas por apenas 30 segundos.

Além disso, na reprodução de várias músicas, em uma playlist por exemplo, o leitor será obrigado a ouvir clips publicitários entre uma música e outra.

Cadastrando-se no aplicativo – plano grátis

Acesse o site: www.deezer.com

Para criar um player de músicas exportável, você precisará se cadastrar no site primeiro. Preencha os campos Endereço de e-mail, Senha, Nome de usuário, Sexo e Idade, depois clique no botão [Cadastre-se].

Se preferir, você também poderá se cadastrar através da sua conta do [Facebook] ou do [Google+] –> Caso utilize uma destas opções, será necessário permitir o acesso da sua conta na rede social…. mas fique tranquilo que é bem seguro – leia as condições gerais de uso no link http://www.deezer.com/legal/cgu.

No nosso exemplo fizemos o cadastro por e-mail. Após o cadastro você já entra imediatamente no painel do Deezer.

Veja as diferenças de reprodução das músicas nos planos grátis (freemium) e pago (premium).

Para saber mais sobre as diferenças dos planos grátis e premium+, acesse o link http://www.deezer.com/offers/

Criando o seu Widget

Para criar widgets com player para músicas individuais basta escolher uma música, um artista ou até um álbum no campo procurar [Procurar] que aparece no menu lateral do painel do Deezer.

No nosso exemplo vamos procurar uma música do Led Zeppelin. Então, vamos digitar Led Zeppelin no campo procurar. Tecle [Enter] ou selecione [Ver tudo–>] em Resultados…

Na guia [Todos], role a tela e escolha a música desejada. Escolheremos a música Whole Lotta Love para o nosso exemplo. Clique no símbolo com "três pontos" que aparece na mesma linha da música escolhida.

No menu da música Whole Lotta Love selecione [Exportar].

Configure o layout do widget conforme descrição abaixo:

Defina o tamanho do player colocando as dimensões em Size, largura (width) e altura (height).
O formato padrão (Format) está definido como Classic. Se desejar, clique em Square para o mudar o formato do layout.
Selecione Autoplay se desejar que o player inicie a música automaticamente (não recomendável para blogs).
Em Hexa color você poderá alterar a cor do link, definido por padrão como azul.
E finalmente em Theme você poderá alterar o layout do widget de dark (escuro) para light (claro).

Na figura abaixo definimos o widget da nossa música de exemplo. Observe optamos pelo formato Classic e o Theme como dark.

Após definido o layout do seu widget role a tela e copie o código em IFRAME.

Recomendamos que teste primeiro o código usando o Squids Editor. Cole o código no lado esquerdo do editor em Código Fonte. Clique no botão [Enviar Código] para ver e ouvir o seu playlist em ação.

Depois de tudo verificado, cole o código no blog ou site no local desejado. Se você não sabe como fazer isso, leia os artigos abaixo:

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

Veja abaixo o nosso primeiro widget de exemplo gratuito (formato Classic).

Atenção: Se você não for cadastrado e, ou, não estiver logado no Deezer ouvirá apenas 30 segundos do player. Para usufruir do player completo no plano gratuito, o leitor precisará se cadastrar e acessar o aplicativo Deezer.

Widget com player para ouvir músicas no seu blog - Visual Dicas

Veja agora o mesmo exemplo no formato Square.

Criando uma lista de músicas

Para criar widget com um lista de músicas clique em [Playlists] no menu lateral do painel do Deezer.

Clique no botão [+ Criar uma playlist].

Digite o nome da sua playlist e clique no botão com o ícone em azul. No nosso exemplo colocamos Led Zeppelin – favoritas.

Agora usando o campo procurar, localize as músicas que deseja inserir na sua playlist. No nosso exemplo vamos pesquisar músicas do "Led Zeppelin".

Escolha as músicas que você deseja inserir na playlist . Com o botão direito do mouse, clique na linha da música desejada e selecione [Adicionar a uma playlist].

Clique na playlist que você criou. No nosso exemplo Led Zeppelin – favoritas. Repita isto para todas músicas a serem adicionadas na sua playlist.

No plano pago, se preferir você poderá marcar várias várias músicas e clicar no botão [+] para adicioná-las na sua playlist. (Não funciona no plano gratuito)

Editando suas músicas no playlist

No menu lateral do Deezer clique em [Playlists].

Clique sobre o link da playlist que você deseja visualizar ou deletar músicas. No nosso exemplo vamos clicar na playlist que foi criada anteriormente, ou seja, Led Zeppelin – favoritas.

Clique com o botão direito do mouse na linha da música que você deseja editar. No menu escolha se quer ouvir, compartilhar, exportar ou remover a música do seu playlist.

Editando a sua playlist

Clique em [Playlists] no menu do painel do Deezer. Depois clique no no símbolo com "três pontos" que aparece na mesma linha da playlist escolhida.

No menu escolha se quer ouvir, compartilhar, exportar ou excluir a playlist da sua conta.

Criar um widget com sua lista de músicas

Para criar o widget de reprodução na conta gratuita, clique em [Playlists] no menu do painel do Deezer e entre na página da playlist escolhida.

Na página da playlist clique no botão [Compartilhar].

Clique no símbolo indicado na imagem abaixo.

Da mesma forma que mostramos anteriormente, configure o layout do widget…

Copie o código em Frame.

Teste o widget usando o Squids Editor. Cole o código no lado esquerdo do editor em Código Fonte. Clique no botão [Enviar Código] para ver e ouvir o seu playlist em ação.

Se tudo estiver funcionando bem, cole no seu blog ou site.

Abaixo veja como ficou o nosso widget. Mas não esqueça, se você não estiver cadastrado e logado no Deezer ouvirá apenas 30 segundos da playlist, pois no nosso exemplo usamos o plano gratuito.

Para saber mais sobre o Deezer, acesse a página http://support.deezer.com/hc/pt-br.

byALF

Leia também: