Widget com player para ouvir músicas no seu blog

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

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

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.

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

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

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

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

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

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.

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

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

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

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.

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

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

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

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

  1. Defina o tamanho do player colocando as dimensões em Size, largura (width) e altura (height).
  2. O formato padrão (Format) está definido como Classic. Se desejar, clique em Square para o mudar o formato do layout.
  3. Selecione Autoplay se desejar que o player inicie a música automaticamente (não recomendável para blogs).
  4. Em Hexa color você poderá alterar a cor do link, definido por padrão como azul.
  5. 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.

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

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

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

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.

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

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.

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

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

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

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

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

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”.

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

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].

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

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

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

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)

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

Editando suas músicas no playlist

No menu lateral do Deezer clique em [Playlists].

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

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.

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

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.

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

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.

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

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

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

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.

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

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

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

Clique no símbolo indicado na imagem abaixo.

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

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

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

Copie o código em Frame.

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

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.

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

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.

Related Posts Plugin for WordPress, Blogger...