21/06/2015

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





Related Posts Plugin for WordPress, Blogger...