Playlist Sound Cloud no site WebAcappella

TEMA: Player

ARTIGO: Revisado e Melhorado

VERSÃO: WA RC  |  WA 4

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, para as contas free serão estipulados uma quantidade de minutos. Para aumentar este limite é necessário criar uma conta pró.

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 ou escolha músicas já postadas clicando em Adicionar a Playlist na faixa desejada. Lembramos que o SoundCloud normalmente exclui músicas enviadas que possuem direitos autorais. Como é comum vários músicos conhecidos postarem suas músicas de forma pública, melhor adicionar as mesmas em sua playlist.


5) Vá para seu perfil  e Atualize a imagem do perfil e da capa, estas aparecerão na playlist no site WebAcappella

6) Agora Clique vá para seu perfil

7) Depois clique em Compartilhar na playlist desejada (se tiver mais de uma) para gerar o código embed o qual será utilizado no WebAcappella

8) Clique na opção Embutido

Você pode escolher a forma de exibição clicando no desejado abaixo de Embutido. 

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

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

IMPLEMENTANDO NO WA4

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

E COLE o código no último campo.

Altere a altura com as mesmas medidas fornecidas no código.

Clique aqui para ver on line no WA 4




IMPLEMENTANDO NO WA RC


Insira no box desejado a opção HTML

Insira no box desejado a opção HTML e cole o código. Para um alinhamento melhor sugiro digitar inserir <center> no início do código

Clique aqui para ver on line no WA RC

Leia mais

Playlist de Músicas em seu site Webacappella com Flash

TEMA: Player

ARTIGO: Revisado e Melhorado

VERSÃO: WA RC  |  WA 4


Hoje vamos ensinar a colocar um Player de Música no seu site  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 alturapx pelo tamanho em pixel

substitua a palavra largurapx 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 pasta 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.

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.

CUSTOMIZANDO O PLAYER
Edite 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)


IMPLEMENTANDO NO WA 4

.Copie o código que você alterou no arquivo "Codigo iframe.txt" e cole no último campo da opção  Inserir >> Código HTML. 

Ajustes as dimensões com as mesmas fornecidas no arquivo "Codigo iframe.txt"

Para visualizar on line clique aqui

IMPLEMENTANDO NO WA 5 (responsive)

.Copie o código que você alterou no arquivo "Codigo iframe.txt" e cole no  campo  HTML. 

Para visualizar on line clique aqui

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

Leia mais