TEMA: Player
ARTIGO: Revisado e Melhorado
VERSÃO: WA RC | WA 4Hoje 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.
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.
** o player continua onde a pessoa parou ate que se esvazie os cokies
