Playlist Sound Cloud no site WebAcappella

O SoundCloud é uma plataforma de áudio on-line em que os usuários colaboram com seus projetos musicais. Voce pode por exemplo criar uma playlist com seus sets e músicas.

É muito comum ver o plugin do SoundCloud em sites de Djs e Músicos.


Então bora lá..

1) Acesse o site https://soundcloud.com/

2) Crie uma conta

3) Caso seu SoundCloud esteja em inglês vá para o link https://soundcloud.com/settings e do lado direito da tela clique em idioma pra mudar para português

4) Faça Upload de seus arquivos

5) Vá para sua playlist e adicione uma imagem de exibição, esta aparecerá na play list no site WebAcappella


6) Depois clique no ícone Compartilhar para gerar o código embed o qual será utilizado no WebAcappella

7) Clique na opção Embutido

8) Clique em Mais Opções  para configurar se a reprodução será automática e o tamanho

9) Copie o código iframe no campo Códgio e Pré-visualização



10) No WebAcappella na página que quer inserir a playlist use a opção INSERIR>>CÓDIGO HTML

Prontinho .. Já tem sua playlist no site

Abraços e o senhos os acompanhe.

Inserindo um Player HTML 5, com local para upload de músicas utilizando o Cincopa. EXCELENTE

Uma grande vantagem do player em HTML5 é por ser leve. O Cincopa disponibiliza este player com música e vídeos e um espaço de até 2gb grátis para você fazer upload dos arquivos.

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.

Inicialmente acesse o Cincopa clicando aqui para iniciar o seu cadastro.

Após se cadastrar você será levado a uma galeria  com várias opções . Clique em Music & Podcast. Você pode acessar também esta galeria clicando no nome do seu perfil e depois em "Create a New Gallery"

Serão disponibilizados vários modelos de player (skin). Clique no que mais lhe agradar. Você pode ver um preview de cada selecionando o desejado e clicando em Preview.

Como as opções são muito diversificadas é muito trabalhoso falar sobre cada modelo nesta postagem. Ficaria imensa. E como vocês podem ver nem de ajeitar o próprio blog estou tendo tempo. Então vou escolher um skin como exemplo e tenho certeza que vocês não terão dificuldade de prosseguir com o escolhido por vocês.

Ao passar o mouse pelo skin desejado clique em "USE THE SKIN" para prosseguir.

O que eu escolhi para esta postagem foi:

O bacana é que ele vai dando um preview a cada mudança nas minhas personalizações do Player. Inclusive para mobiles e tablets.

Do lado esquerdo existe um painel onde faço toda a customização. 

Começando pela área de Basic (Configurações Básicas)

Em Gallery Title preencho com um título para o meu Player

Gallery Description: Insiro uma descrição qualquer

Em Max Size of the Widget: Se você não preencher nada ele assume um valor de 100%. Daí o Player tenta se ajustar ao tamanho da largura da sua página.  Você pode definir seus ajustes manuais em Pixels ou em percentual.

Em Playlist Height você define a altura da lista das músicas do Seu Playlist. 

Como eu não queria que mostrassem a lista de músicas coloquei este valor "0"

Repare que em cada ação é mostrado um Preview ao lado.

Prosseguindo iremos customizar o Advanced (Avançado)

Nesta opção de cara já é me dado um botão onde posso personalizar o CSS da minha galeria. Se você não tem um conhecimento em CSS aconselho pular para a próxima.

Volume: Neste campo você pode digitar o valor padrão do volume do seu Player. Eu costumo por 30.

Auto Start: Define On se quer que ele inicie a tocar automaticamente.

Auto Start tracks: Você define se a próxima música já se inicia ao final da anterior

Pause other players: Quando em ON, todos os outros Players sobre a página será pausado quando este Player estiver acionado (nota: só funciona se iframe está definido para Off.

Continue playing on different pages: Continuar a reprodução na posição atual depois de recarregar a página, você pode incorporar galeria por exemplo no rodapé e vai continuar a mesma música por toda navegação no seu site.

Auto repeat of playlist: Repetição automática de lista

Auto repeat of song: Esta sugiro deixar em Off. Pois é repetição automática da música que está tocando. 

Show playlist: Aqui você define se quer mostrar a lista de reprodução ou não. 

Playlist Text: Você pode escolher como que você quer que apareça sua lista das músicas: Título / Descrição / Título e descrição

Show Shuffle: Mostra as músicas aleatoriamente

Show progress bar: Mostra a barra de andamento 

Show navigation: Mostra a barra de navegação entre as faixas

Show volume : Mostra a barra de Volume

Cover Image: Mostra a imagem 

Image in playlist: Você define o tamanho da imagem, PEQUENO/MÉDIO/GRANDE

Cover image max height: Você define a altura da imagem da capa

Agora vamos customizar as cores do nosso player na opção Design

Theme Color: Cor do tema

Text color: Cor dos textos

Background color: Cor do fundo

Finalizando a customização do Player configuramos alguns detalhes extras em Misc (Miscelânea) 

Em allow Download você informa se pode-se baixar e salvar todos os arquivos. (* Zip redimensionada contém fotos redimensionadas para 600x450, vídeos em formato mp4 e música em amostragem original.)

Domain Lock:  Nesta opção você pode permitir ou restringir que a galeria possa aparecer em outros domínios. Escreva uma lista de domínios separados por vírgula ou deixe em branco para permitir que todos os domínios.

Portanto se quer que apareça só no seu site escreva seu domínio.Não há necessidade de http: //

Password: Protegido sua galeria com uma senha. Dê a seus usuários e só eles serão capazes de acessar o conteúdo.

Iframe: Ative esta opção se a galeria não está funcionando corretamente e dentro de uma página da galeria será colocado em um iframe HTML.

Track Events With GA: Se em On, irá publicar eventos diretamente para seus conta do Google Analytics, onde você pode obter infromation detalhadas sobre o envolvimento dos usuários.

Search box: Adicione uma caixa de busca acima da galeria para permitir ao usuário pesquise na galeria

Após feito toda as configurações clique em USE THESE SETTINGS , botão localizado acima do Preview do seu player. 

Você será redirecionado para a página onde fará upload das músicas.

Após feito o upload das músicas clique em Next

Já na 4ª Você poderá fornecer um subtítulo e uma descrição para cada faixa ou deixar em Branco. 

Continue clicando em Next e finalmente você terá o código disponível para inserir no WebAccappella utilizando a opção INSERIR>>CÓDIGO HTML. São fornecida  duas opções de código, se um não der tente o outro.

A partir daí basta você instruir seu cliente de como alimentar seu Player. Eu gosto muito de fornecer ao meu cliente um Manual de instruções de como alimentar informações quanto aproveitamento do site. 

Para incluir mais músicas basta logar no Cincopa, Clicar em Galleries, Escolher a galeria a qual foi criada para o Website e fazer upload das músicas. 

É tão facil inserir este player que acho nem ser necessário este tutorial. Mas pelo menos serviu para informar para quem não o conhecia.

Para ver o demo clique aqui: 

Até a próxima.

Inserindo um player no seu site Webacappella sem necessidade de hospedar as músicas. Utilizando o SCM Music Player

Na postagem anterior eu expliquei como incluir um Player onde você faz upload das músicas via ftp. Caso você queira ver este post clique aqui.


Portanto,  nem sempre o plano de hospedagem é ilimitado e não se pode ter muito espaço para as músicas.

Uma opção interessante é utilizar o Player do SCM.

1) Acesse este link: http://scmplayer.net/

2) Na primeira aba você escolhe qual vai ser a aparência do seu player

3) Após escolhido qual aparência desejada clique na aba "Edit Playlist"

Nesta parte você tem duas opções.

1. Incluir o nome dos Títulos das Músicas e as url´s onde estão hospedadas
2. Incluir um playlist criado no Sound Cloud

Eu particularmente sugiro a segunda opção. Pois pode criar o cadastro no SouddCloud.  Pois você pode ter vantagens como: 

• Não necessitar de utilizar uma ferramenta FTP para postar as músicas
• Fazer upload das suas vinhetas por exemplo para seu playlist criado no SoundCloud
• Desfrutar de uma inúmeras músicas já disponíveis no SoudCloud
• Ordenar editando sua play list a ordem das músicas
• Inserir uma vez só o código n oWebAcappella (sem necessidade de ficar refazendo)

DESVANTAGENS:

• Lista das músicas do Player com propaganda
• Link para a págian do SCM no player (o que não acho interessante)

Para isso clique na opção RSS Podcast / SoundCloud Sets

E no campo que aparecer cole a url do Play list desejado fornecido pelo Sound Cloud.

Url fornecida pela SoundCloud

Inserindo a url da Play List no código

Agora clique em Next.

4) Iremos agora configurar nosso player

Auto Play: Caso queira que a música inicie a tocar automaticamente deixe a caixa de verificação assinalada

Shuffle Playback: Assinale caso queira que a reprodução da lista seja aleatória.
Default Volume: Coloque o volume padrão , não impede que o visitante do site possa alterar o volume.
Repeate Mode: Configura o modo que faz a repetição
Placement of Player Bar: Você pode escolher o player no topo do site ou na base.
Show Playlist by Default: Se assinalada mostrará a lista de músicas a direita , se não ela fica oculta sendo necessário que o visitante do site clique na opção a direita do volume para que abra a lista de músicas.


Após configurado clique em "Done"


5) Na próxima tela será disponibilizado o código que iremos incluir no WebAcappella

6) Copie o código gerado e inclua no webacappella com a opção INSERIR >> CÓDIGO HTML
em qualquer parte da página que deseja que apareça o player.


A única coisa que lamento são as propagandas na lista de músicas.

Coloque um player de música pelo Webacappella

** atenção. houve correção do plugin e melhoras na postagem

Hoje vamos ensinar a colocar um Player de Música no seu site feito por Webacappella.
Neste player aparece a lista de músicas hospedadas e o visitante do site poderá selecionar a qual ele quer ouvir.

• Voce vai precisar de uma hospedagem para as músicas. (Poder ser a própria utilizada para o site.)
• Um serviço de FTP para envio das músicas

1) Baixe os arquivos do player clicando aqui em um local no seu computador

2) Descompacte os arquivos

3) Edite o arquivo index.html para que se faça o ajuste do tamanho (aconselho utilizar o Notepad++ para editar este arquivo. Caso você ainda não tenha clique aqui para baixar:)

4) Pelo Notepad++ vá até a linha22 para editarmos os valores dos tamanho. Localiza "flashmp3player.swf"

5) Ajustes a altura em pixels do seu player ajustando  campos assinalados com vermelho: ("flashmp3player.swf", "player", "largurapx", "alturapx", "9"). Salve o arquivo

substitua a palavra altura pelo tamanho em pixel

substitua a palavra largura pelo tamanho em pixel

Observe a figura acima para ter um exemplo

6) Pelo seu gerenciador de FTP que utiliza crie uma pasta dentro de public_html onde serão hospedados os arquivos do Player

7) Copie todo o conteúdo da paste descompactada no item "2" para a pasta criada na sua hospedagem.

8) Para adicionar as músicas. Você faz upload das mesma por um gerenciador FTP para dentro da pasta mp3. O player automaticamente toca as músicas em ordem alfabética. Então é importante orientar a quem vai utilizar que numere as músicas de forma a ordem de preferência em que vão ser tocadas. 

Ex: 

Uma ideia é criar e configurar uma conta FTP somente autorizando utilizar a pasta mp3.

Outra idéia é configurar um MiniGerenciador de arquivos em uma área restrita do site do cliente para ele fazer upload das músicas.. Veja o Mini Gerenciador de arquivos clicando aqui.

9) Para adicionar o player no Webaccapela edite o arquivo "Codigo iframe.txt" que está dentro da pasta descompactada no item "2". 

Altere o caminho onde encontra o index.html do player.

Ajuste também a largura e a altura como feito no arquivo index.html, não é necessário seguir as mesmas medidas no index.html. No caso da altura sugiro aumentar 15 px sobre o valor dito no arquivo index.html

Veja a imagem acima como referência.

.Copie o código e insira no Webacappella com a ferramenta Inserir >> Código HTML. 

Você pode embelezar a área do seu player utilizando os próprios recursos do Webacappella como também pode alterar as cores, funções do player editando o arquivo default.xml.

ALTERAÇÕES DE CORES

scroll_bar_color : cor da barra de rolagem
scroll_bar_bg_color : cor de fundo da barra de rolagem
arrows_color:  Scrollbar setas da cor
border_color:  cor das bordas
buttons_color1:  primeiro gradiente de cor para os botões de fundo
buttons_color2:  segundo gradiente de cor para os botões de fundo
buttons_normal: Cor dos Botões
buttons_over: Cor dos botões em mouseover
background_color: cor de fundo geral
volume_active: cor volume Ativo
volume_inactive:  cor volume Inativo
text_normal: cor do título da música
text_over:  cor título da música em mouseover
text_select:  cor do título da música selecionada
playlist_item_normal: cor do item da Playlist
playlist_item_over:  cor item da playlist em mouseover
playlist_item_select:  cor item de lista Selecionado
playlist_position: cor do botao Play




ATIVAR PARA O PLAYER COMEÇAR A TOCAR AUTOMATICAMENTE
LINHA 24: Altere o valor " (on= ligado , off= desligado)

SALAR A POSIÇÃO DE ONDE A MÚSICA ESTIVER TOCANDO E A ALTURA DO VOLUME
LINHA 25: Altere o valor (on= ligado , off= desligado)

ALTERAR O VOLUME DA MÚSICA
LINHA 26: Altere o valor

PARA APARECER NUMERAÇÃO ANTES DO NOME DA FAIXA
LINHA 27: Altere o valor  (on= ligado , off= desligado)

MOSTRAR O TEMPO DECORRIDO DA MUSICA QUE ESTÁ TOCANDO
LINHA 28: Altere o valor  (on= ligado , off= desligado)

Daqui pra frente é só usar sua criatividade.

Se gostou comente. abraços a todos

** o player continua onde a pessoa parou ate que ela esvazie os cokies