[Servicos] - Player de música com estilo de “rádio online” no Blogger

Eu já mostrei há um tempo atrás como colocar um player de música do MixPod no Blogger. Porém, esse player, geralmente, fica localizado na sidebar (barra lateral) do blog, e ao recarregar a página ou acessar qualquer artigo o player pára de tocar a música, e começa desde o início. Eu estive procurando algum player que pudesse ser utilizado como uma rádio online no Blogger, mas não havia obtido sucesso — até agora!

Foi então que, após minha amiga Alessandra me passar o endereço de um Tumblr, e pedir para que eu instalasse no Tumblr dela um tocador de músicas como o que estava sendo utilizado no outro, eu conheci o serviço SCM Music Player. Ao acessar o site desse player eu percebi que o mesmo podia ser instalado em várias plataformas, dentre elas: o Blogger — e também o Wordpress. Para ver uma demonstração de como o player ficará após ser instalado, visite nosso blog de testes. Note que ao entrar em qualquer artigo, ou página, a música não é interrompida. Para instalar esse player em seu blog, siga os passos abaixo.

Criando um player no site SCM Music Player


Primeiramente, antes que você possa fazer uso de tal serviço, você precisa criar um player no site SCM Music Player. O processo de criação é extremamente simples, e será concluído em apenas três passos. Para criar o seu player acesse esse link: http://adf.ly/SK3UL. Após clicar no link, você verá uma página com publicidade, aguarde 5 segundos e clique na frase "Fechar Propaganda", localizada no canto superior direito da janela, para ser direcionado ao site do SCM Music Player.

Passo 1 - Choose Skin (escolher modelo)



Neste primeiro passo você deverá escolher o modelo (tema) que mais se adequar ao seu blog e/ou que mais lhe agradar. Caso você tenha conhecimentos sobre CSS e queira criar um modelo que combine com o layout do seu blog, você poderá conferir os arquivos CSS (e outros arquivos) de todos os players acessando a sessão de desenvolvimento do site.

Passo 2 - Edit Playlist (editar lista de reprodução)



Neste segundo passo você deverá informar quais músicas deseja adicionar ao seu player, e como essas músicas serão adicionadas. Veja as explicações abaixo.
  • Manual Playlist: essa opção aparecerá selecionada por padrão, e indica que as músicas serão adicionadas manualmente ao player, ou seja, você deverá informar a URL de todas as músicas que quer adicionar no seu player.
    • Song Title: neste campo você deverá escrever o nome da música e do artista.
    • Song URL: neste campo você deverá informar a URL da respectiva música que você está adicionando. Você pode utilizar arquivos MP3 (hospedados em seu próprio servidor) ou o link de vídeos do Youtube.
  • RSS Podcast / SoundCloud Sets / Youtube Playlist: através dessa opção você pode informar o link de um feed de podcast, de playlists do serviço SoundCloud, e playlists do Youtube.
Caso você não vá utilizar todos os campos disponíveis, você poderá excluir os campos que estão sobrando clicando no ícone de fechar (X), que está presente ao lado de cada campo, mas se os campos disponíveis não são suficientes e você precisar adicionar mais alguns, poderá fazê-lo clicando no botão Add more songs. Você também pode verificar se a música está sendo reproduzida corretamente, clicando no botão de Play que há ao lado de cada campo.

Passo 3 - Configure Settings (configuração do player)



Neste terceiro passo você poderá fazer as configurações gerais do player. Confira as explicações de cada opção, e o que cada uma faz, logo abaixo.
  • Playback:
    • Auto Play: através desta opção, você poderá indicar se as músicas começarão a tocar automaticamente quando o visitante entrar em seu blog. Marque a caixinha para que as músicas toquem automaticamente; desmarque a caixinha para que as músicas toquem apenas ao clicar no botão de Play.
    • Shuffle Playback: esta opção permite que você indique se as músicas serão tocadas na ordem em que foram adicionadas, ou se serão tocadas aleatoriamente. Marque a caixinha para ativar o recurso, ou desmarque-a para desativá-lo.
    • Default Volume: essa opção permite que você escolha o volume padrão do seu player, porém, seu visitante poderá alterar o volume como bem entender ao acessar o seu blog.
    • Repeat Mode: através desta opção você pode escolher se as músicas do seu player repetirão quando chegar ao fim ou não. Escolha a opção "Play Playlist Once" para que suas músicas toquem apenas uma vez cada; escolha a opção "Repeat Playlist" para que as músicas repitam sem parar; escolha a opção "Repeat Item" para repetir apenas uma música.
  • Appearence:
    • Placement of Player Bar: utilize esta opção para definir a posição do player em seu blog. Escolhendo "Top" o player ficará posicionado no topo do blog; e, escolhendo "Bottom" o player ficará localizado na base do blog (como em nosso blog de testes).
    • Show Playlist by Default: escolha se você deseja mostrar a lista de músicas no seu player ou não. Marque a caixinha para mostrar a lista de reprodução, ou desmarque-a para oculta-la.
Após ter configurado o player como você achar melhor, clique no botão Done para gerar o código do player (veja a imagem abaixo). Copie o código para o bloco de notas.


Adicionando o player em um blog do Blogger


Agora que você já possui o código do player, veja como instalá-lo em seu blog do Blogger.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML, pressione Ctrl+F para abrir a janela Localizar do navegador, e procure o código abaixo.

<body

Você deve reparar que o código acima é apenas o começo do código, e que na verdade o código é um pouco maior (depende do template usado). O código completo em templates padrão de blogs do Blogger, é como o mostrado abaixo.

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

3. Você deverá colar imediatamente abaixo do seu código body, o código do player que você salvou no bloco de notas. Ficará algo como ilustrado no código abaixo.

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
<!-- SCM Music Player http://scmplayer.net -->
<script type="text/javascript" src="http://scmplayer.net/script.js"
data-config="{'skin':'skins/aquaPurple/skin.css','volume':50,'autoplay':true,'shuffle':false,'repeat':1,'placement':'bottom','showplaylist':false,'playlist':[{'title':'DJ BL3ND - RAGE MIX','url':'http://www.youtube.com/watch?v=XWPmbg5kuxs'}]}" ></script>
<!-- SCM Music Player script end -->


4. Após ter feito tudo isso, clique no botão Visualizar e, se estiver tudo certo, clique no botão Salvar modelo. Pronto, agora você já pode acessar o seu blog e verificar se o player está funcionando corretamente.

Adicionando e removendo músicas no player SCM Music Player


Num primeiro momento você estará satisfeito com as músicas que adicionou, mas eventualmente você conhecerá novas músicas e/ou enjoará de algumas que você adicionou. Nesse momento você quererá adicionar ou remover algumas músicas, e é isso o que mostrarei a você como fazer neste tópico.

NOTA: quando adicionamos alguns códigos ao template de blogs criados na plataforma Blogger, o mesmo, algumas vezes, altera automaticamente o código, o que prejudica na hora de adicionar mais músicas. E com uma atualização do código do player, o processo abaixo poderá não funcionar. Entrarei em contato com o dono do código para tentar encontrar uma solução para este problema.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML, pressione Ctrl+F para abrir a janela Localizar do navegador, e procure o código abaixo do seu player. Para facilitar, basta procurar por "SCM Music Player".

3. Após ter encontrado o código do seu player, selecione-o e copie-o inteiramente. Cuidado para não esquecer nenhuma parte dele, ou selecionar outros códigos do seu template.

4. Acesse o site do SCM Music Player (http://scmplayer.net/). Em seguida, na seção "Choose Skin", clique no botão Import Profile, localizado logo abaixo da lista de modelos. Cole o código do seu Player dentro do campo que aparecer, como ilustra a imagem abaixo.


5. Clique no botão OK. Aparentemente nada terá acontecido, mas clique na aba "Edit Playlist" e, se tudo tiver ocorrido de maneira correta, você deverá ver todas as músicas que você havia adicionado. A partir desse momento você poderá adicionar novas músicas ou excluir as que não quer mais. Você pode alterar as configurações e o tema do player também.

6. Após ter feito todas as alterações que deseja, vá para a aba "Configure Settings", e clique no botão Done para gerar um novo player. Em seguida basta seguir os passos de instalação que já foram explicados acima.

Prós do serviço


  • Diversos modelos disponíveis;
  • Permite customização através de propriedades CSS;
  • Permite configurações de volume, autoplay e reprodução;
  • Possível escolher posição do player (topo do blog, ou na base do blog);
  • Sem limite de músicas;
  • Player OpenSource (permite que você hospede e/ou edite como quiser o código do player);

Contras do serviço


  • O endereço do blog não muda (pode prejudicar a contagem de visitas);
  • Complicado para editar a lista de músicas após ter sido instalada no blog;

Por mais que esse recurso seja bacana, e tenha inspirado você a criar uma verdadeira rádio online em seu blog, lembre-se: muitos leitores navegam na web ouvindo suas próprias músicas, então, não abuse desse recurso para não perder visitantes. E você, o que achou desse serviço? Já o conhecia ou utilizava? Deixe sua opinião nos cometários.

Atualização — 27.07.2012 às 21h05
O artigo foi totalmente atualizado para uma reformulação do texto, e adição de informações importantes, como os prós e contras do serviço e como adicionar novas músicas. Também foi feita uma atualização nas imagens para refletir mudanças estéticas no site do SCM Music Player. Agora o endereço da página não fica mais estático (o que podia prejudicar a contagem de visitas), e uma opção para controle de repetição foi adicionada ao serviço.

Atualização — 02.03.2013 às 00h15
Fui informado através do comentário da leitora Vanessa, que após instalar o player do serviço SCM Music Player em seu blog, o mesmo passou a direcionar para a página do player. Ao acessar o site do serviço, pude constatar uma mensagem informando que o serviço havia sofrido um ataque DDoS, que como consequência está fazendo com que o blog dos usuários do serviço redirecionem para a página inicial do player.

A equipe do site SCM Music Player informa também que está trabalhando para resolver o problema o mais breve possível. Enquanto isso, é aconselhável que você não instale o player em seu blog, ou caso seu blog já tenha sido afetado, é aconselhável que você faça login em seu painel de controle diretamente pela página do Blogger (www.blogger.com), e remova o código do player. Assim que os ataques cessarem e o serviço voltar ao normal este artigo será atualizado.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 28 comentários neste artigo!

  1. Olha, que legal. Boa dica. Eu não curto música em blog pois não são todos os leitores que têm o mesmo gosto ou podem estar no trabalho, onde não podem fazer barulho. Mas é um dos melhores sistemas de música para blog que já vi.

    Abraço!

    ResponderExcluir
  2. Retiro o que disse. Parece uma boa idéia, mas o script apresenta vários bugs, principalmente no Google Chrome, não recomendo.

    ResponderExcluir
  3. Isaias: eu testei o player nos navegadores: Mozilla Firefox, Google Chrome, Internet Explorer e Opera (todos nas versões mais recentes), e não houve nenhum tipo de problema comigo. Não sei o que pode ter ocorrido com você, talvez algum conflito com outro script, mas acho um pouco difícil, pois instalei o player em templates com diversos hacks. Agradeço o comentário. Volte sempre!

    ResponderExcluir
  4. @RooSouza_: não vi nenhum aviso informando que precisa pagar, pelo contrário, o que há no site é a mensagem “SCM Music Player is a free and open source web music player”, que informa que o player é grátis (free). O botão Donate é apenas para quem quiser fazer uma doação para o autor do player, o que não é obrigatório.

    ResponderExcluir
  5. No meu blog não foi, sempre que clico em visualizar aparece uma mensagem de erro1

    ResponderExcluir
  6. Anna, tenha certeza de estar adicionando o código no local correto. Se o problema persistir, entre em contato novamente e informe o endereço do blog onde o erro está acontecendo e, se possível, uma imagem do erro.

    ResponderExcluir
  7. No meu blog não dá D:
    Eu adoro ouvir música , e em geral mexo em outros pcs , já que o meu tá sempre quebrando ;/ - Mas ia colocar para tocar quando a pessoa apertasse "play" , mas eu faço tudo o que o tutorial pede e não vai , aparece código de erro , mas no meu tumblr dá certinho ;/
    O que eu faço ? T-T

    ResponderExcluir
  8. Beah, esse problema pode estar ocorrendo por um conflito entre algum hack que você possa ter instalado no seu blog, infelizmente eu não posso dizer exatamente o que está causando esse problema. Desculpe não poder ajudar de uma maneira mais efetiva.

    ResponderExcluir
  9. por favor amigo faz uma video aula facinha para min colocar radio e player no meu blog para eu ter uma radio oline por favor

    ResponderExcluir
    Respostas
    1. Olá Betinho, este artigo faz referência à um player de música simples que tem aparência de rádio online, mas ele não funciona dessa maneira. As rádios online exigem que você utilize programas para tocar as músicas em stream. Talvez este artigo do site Tecmundo te ajude: http://www.tecmundo.com.br/audio/5454-como-criar-uma-radio-online-de-graca.htm. Agradeço a visita e o comentário.

      Excluir
  10. Respostas
    1. Olá Adumildes, você teve dúvida em qual parte do tutorial?

      Excluir
  11. Respostas
    1. Olá Camilo, infelizmente esses recursos são um pouco pesados, e dependendo dos recursos que você possui instalados em seu blog, que vão desde os gadgets até os scripts na estrutura do seu template, o blog pode acabar ficando lendo mesmo.

      Excluir
  12. Estou montando meu blog agora e Adorei esse player!!! Funcionou em dois navegadores, Google Chrome e IE, mas não funcionou no Mozilla... Meu blog não abre no Mozilla quando coloco o código do player. Ele carrega o blog e depois some tudo e só aparece o background e mais nada. Posso ter feito algo errado, pode me ajudar?

    Ah~~ Pode ser aquela parte em azul que eu não coloquei, mas tb não achei onde colocar, é que no meu código, ficou diferente do que está no exemplo. Se puder tirar minhas dúvidas eu agradeço~~

    E obrigada pelo tutorial ^^

    ResponderExcluir
    Respostas
    1. Olá Pininha, o código fornecido no artigo estava desatualizado, pois o autor do hack fez uma atualização nele, por isso que o seu código estava aparecendo diferente. Eu já atualizei o artigo, e testei o código do player, que está instalado no blog de teste, nos navegadores: Firefox, Chrome, Internet Explorer e Opera, e em todos eles o player funcionou normalmente. Tente instalar novamente, e caso o problema persista entre em contato novamente. Desculpe a demora em responder!

      Excluir
  13. É melhor colocar o código como Gadget html/javascript,assim nem precisa fazer as edições. O código do site fuciona direto.
    Por que alterando no modelo não fuciona de jeito nenhum, porque o Blogger teve mudanças.

    ResponderExcluir
    Respostas
    1. Olá Kris, realmente, o código pode ser adicionado dentro de um gadget HTML/JavaScript, que o player funcionará sem problemas! Porém, eu não demonstro isso no artigo porque alguns templates podem mostrar um gadget "vazio" no blog, o que o transforma em um problema estético. Quanto ao Blogger ter feito mudanças, acredito que isso não influencie em nada, pois no blog de testes o player funciona normalmente, e ele é adicionado diretamente no template. Agradeço a participação e o comentário. Desculpe a demora em responder. Volte sempre!

      Excluir
  14. muito bom mesmo obrigado tava procurando isso

    ResponderExcluir
  15. O meu blog agora entra a pagina inicial do scm music player e eu nao consigo visualizar nada do meu blog, eu tive que excluir o scm player do meu blog :( tenho copiado no computador a minha playlist. Please. HELP ME!!! Eu nao estou entendo. Me ajudem!!! PORTUGUES

    Il mio blog entra ora nella home page del lettore musicale scm e non posso vedere nulla sul mio blog, ho dovuto eliminare il lettore scm del mio blog: (ho copiato la mia playlist sul mio computer per favore mi aiuti!!!! non capisco. Help me! ITALIANO

    My blog now enters the home page of the scm music player and I cant see anything on my blog, I had to delete the scm player on my blog: (I copied my playlist. Please. HELP ME!! I'm not understand. help me!!

    THE DIARY OF A DOLL 4 (O ENIGMA)
    email: ildiariodiunabambola@hotmail.it
    Vanessa Degani. :)

    ResponderExcluir
    Respostas
    1. Olá Vanessa, obrigado por comentar! O problema do seu blog estar direcionando para o site do SCM Music Player, se deve ao fato do servidor deles estar sofrendo um ataque DDoS, como é informado na própria página do serviço. Atualizarei o artigo com essa informação, e assim que o problema for resolvido postarei algo a respeito. Enquanto isso, aconselho que não utilize o player em seu blog. Para acessar o seu painel de controle, faça login através do endereço oficial do Blogger (www.blogger.com), vá diretamente no local aonde você adicionou o código do player e o exclua. Isso deve resolver o problema.

      Excluir
  16. instalei no meu site www.joaolucasevoce.com e funcionou corretamente... Indico

    ResponderExcluir
    Respostas
    1. Como vocÊ fez João? tentei colocar no meu site mas não esta ondo! :/ ME AJUDA!

      Excluir
  17. Olá, tem como colocar em site?, porque eu tentei e não consegui! :?

    ResponderExcluir
    Respostas
    1. Olá Elídia, acredito que seja possível instalar o player em sites sim, pois o mesmo é criado e funciona à base de um script. Só não posso lhe dizer com certeza se irá funcionar, pois não tenho conhecimentos sobre a codificação de outras plataformas e não sei em qual plataforma seu site foi criado, mas vale fazer um teste. Agradeço a visita, volte sempre!

      Excluir