Avaliação: | Publicado em: 04/09/2005

Player de MP3 com Flash e XML, parte 2

Johnatan Oliveira Graduando em Tec. Informática e Aplicações Web, é desenvolvedor ASP/SQL Server e atua no mercado web a cerca de 4 anos como desenvolvedor e design de interfaces. É apaixonado por Flash MX/Action Script. Atualmente é Diretor de Projetos do Portal Plugmasters, colaborador da Revista WWW.COM.BR, onde escreve sobre ASP e Flash e designer/programador de uma agência web. Além de manter o site johnatan.net.

Player de MP3 com Flash e XML, parte 2

Bom, agora chegamos a parte funcional do player... O código. Vamos a ele.

Action Script

Explicarei detalhadamente cada parte do código. Antes de tudo verifique se você instanciou todos os objetos no palco. Se esta tudo ok! Click na camada action, selecione o frame e aperte F9, será aberta a aba Actions, onde o código que controlará todo o player será digitado.

Aberta a aba, digite:

#include "playermp3.as"

Esta ação pega um arquivo (.*as) de texto externo contendo Actionscript e o inclui no script existente da lista de ações. Você deve estar se perguntando o porque disso? É simples. Digitaremos todo o nosso código em um arquivo separado e dentro do playermp3.fla só incluímos ele.

Vá em File > New [Ctrl+N], e escolha a opção ActionScript File. Após abrir, salve-o como playermp3.as (File > Save [Ctrl+S]). E vamos a parte mais interessante.

Lendo o arquivo XML (musicas.xml)
e Preenchendo o comboBox(cb_musicas)

1 var musicasXML:XML = new XML();
2 musicasXML.ignoreWhite = true;
3 musicasXML.onLoad = function():Void {
4 var arrayMusicas = new Array();
5 for (var a = 0; a<musicasXML.childNodes[0].childNodes.length; a++) {
6 arrayMusicas.push(musicasXML.childNodes[0].childNodes[a].attributes.nomeMusica);
7 }      

Na linha 1, declaramos o objeto musicasXML como sendo do tipo XML. Na linha 2, usamos musicasXML.ignoreWhite como true para ignorar os espaços em branco do arquivo XML.  Na linha 3, criamos uma função que será chamada automaticamente assim que o xml for carregado. Na linha 4, declaramos a Array que conterá as musicas. Na linha 5, faremos um for que vai de a = 0 até a menor que quantidade de nós filhos (<musica> = childNodes[0].childNodes) do 1° nó filho do XML (<musicas> = childNodes[0]). Na linha 6, adicionamos o valor adquiro do atributo nomeMusica a arrayMusicas. Na linha 7, finalizamos o for.

8 cb_musicas.dataProvider = arrayMusicas;
9 cb_musicas.setStyle("themeColor", "0xF0ECD0");
10 cb_musicas.setStyle("color", "0x000000");
11 cb_musicas.setStyle("fontFamily", "Trebuchet MS");
12 cb_musicas.addEventListener("change", link);
13 }
14 musicasXML.load("musicas.xml");

Na linha 8, adicionamos todos os dados obtidos do XML, agora localizados em arrayMusicas ao componente ComboBox cb_musicas. Nas linhas 9,10 e 11, alteramos o estilo do ComboBox. Na linha 12, adicionamos um evento ao ComboBox, cb_musicas.addEventListener("change", link);, onde change, quer dizer quando for selecionado e link é a referencia a um objeto que criaremos logo mais.
           
Linkando o comboBox

15 var link = new Object();
16 link.change = function () {
17 if (cb_musicas.selectedItem=="Selecione Uma Música"){
18 break;

Na linha 15, criamos o objeto link. Na linha 16, criamos a função, que será automaticamente chamada quando algum item for selecionado. Na linha 17, verificamos se o item é igual a "Selecione Uma Música", que é o primeiro nó filho de <musicas> do nosso XML. Caso seja, ele para na linha 18 com o break.

19 }else{
20 _global.paraMusica();
21 _global.tocaMusica(cb_musicas.value);
22 _root.controles._visible=true;
23 mcPausa._visible=true;
24 mcStop._visible=true;
25 mcPlay._visible=false;
26 tTime._visible=true;
27 }
28 };

Caso não seja igual a "Selecione Uma Música" (Linha 19), chamamos a função paraMusica(); (Linha 20) que será criada logo mais, para o caso de alguma musica estar tocando. Na linha 21, chamamos a função _global.tocaMusica(); que irá tocar a musica selecionada, passando o parâmetro cb_musicas.value, que contem a musica a ser reproduzida. Logo após habilitamos a visualização do Movie Clip controles (Linha 22), e os botões mcPausa (Linha 23) e mcStop (Linha 24). Na linha 25, desabilitamos a visualização do botão mcPlay e na linha 26, habilitamos a visualização do tempo da musica.

Configurações Iniciais

29 mcPausa._visible=false;
30 mcPlay._visible=false;
31 mcStop._visible=false;
32 tTime._visible=false;
33 _root.controles._visible=false;
34 _root.barra._visible = false;
35 var vol:Number = 100;
36 var bal:Number = 0;
37 _root.barra.barra_d._xscale = 1;

Estão configurações inicias vão estar fora de qualquer função, como o nome já diz, elas tem que ser setadas inicialmente. Nas linhas 29,30,31,32,33,34, desabilitamos a visualização dos botões mcPausa (Linha 29), mcPlay (Linha 30) e mcStop (Linha 31), da caixa de texto tTime (Linha 32) e dos Movie Clips controles (Linha 33) e barra (Linha 34). Nas linhas 35 e 36, criamos as variáveis vol e bal que serviram para setar volume e balano respectivamente. Na linha 37 modificamos o tamanho do Movie Clip barra_d dentro de barra.

Funções de Controle de Som

38 _global.tocaMusica = function(nome){       
39 var diretorio:String = "musicas/";
40 var lista = diretorio + nome;
41 _global.novoSom = new Sound();
42 _global.novoSom.onSoundComplete = function (){
43 _global.paraMusica();
44 };   

Na linha 38, criamos a primeira função a ser chamada assim que alguma musica do ComboBox for selecionado (Linha 21). Na linha 39, criamos uma variável de apoio, caso as musicas estejam em algum diretório. Na linha 40, criamos a variável lista que vai receber o diretório mais o nome da música passado por parâmetro na função (_global.tocaMusica(cb_musicas.value);). Na linha 41, declaramos uma nova instancia de objeto da classe Sound. Na linha 42, criamos o evento que será chamado automaticamente quando a reprodução do som é concluída. Caso a reprodução for concluída paramos a música (Linha 43).

45 _global.novoSom.loadSound(lista, true);    
46 _soundbuftime = 10;          
47 var somPausado:Boolean = false;
48 var somParado:Boolean = false;
49 _global.novoSom.setVolume(vol);
50 _root.controles.txtvolume.text = vol;
51 _global.novoSom.setPan(bal);
52 _root.controles.txtbalanco.text = bal;
53 _global.verTime();  
54 }

Na linha 45, usamos o método loadSound(url:String, isStreaming:Boolean), onde lista é o local do mp3 e true configura Streaming fazendo com que o som seja tocado enquanto vai sendo carregado. Na linha 46, setamos o buffer do som para 10 segundos. Nas linhas 47 e 48, criamos duas variáveis que vão nos servir para checagem e testes nas funções. Na linha 49, setamos o volume de acordo com a variável vol. Na linha 50, preenchemos a caixa de texto txtvolume. Na linha 51, setamos o balanço de acordo com a variável bal. Na linha 52, preenchemos a caixa de texto txtbalanço. Na linha 53 iniciamos o tempo da musica.

55 _global.tocaMusicaAtual = function (){      
56 _global.novoSom.start();    
57 _global.verTime();
58 somPausado = false;
59 somParado = false;
60 _root.controles._visible=true;
61 mcPausa._visible=true;
62 tTime._visible=true;
63 mcPlay._visible=false;
64 }

Na linha 55, criamos a função utilizada para retornar a reprodução da musica atual, parada ou pausada. Na linha 56, damos um start na música. Na linha 57, retomamos a contagem do tempo. Setamos as variáveis de verificação como false, já que o som retornou (Linha 58 e 59). Habilitamos a visualização dos controles (Linha 60), do mcPausa (Linha 61) e da caixa de texto tTime (Linha 62). Desabilitamos a visualização do mcPlay (Linha 63).

65 _global.pausaMusica = function (){
66 _global.PosPausa = _global.novoSom.position;
67 _global.novoSom.stop();    
68 somPausado = true;
69 somParado = false;
70 mcPlay._visible=true;
71 mcPausa._visible=false;                 
72 _global.paraTime();
73 }

Na linha 65, criamos a função de pausar musica. Na linha 66, gravamos a posição onde a musica foi pausada. Na linha 67, paramos a musica. Na linha 68, setamos como true a variável somPausado e como false a variável somParado (Linha 69). Na linha 70, habilitamos a visualização do mcPlay, e na linha 71, desabilitamos a visualização do mcPausa. Na linha 72, paramos a contagem do tempo.

74 _global.tiraPausa = function (){      
75 _global.novoSom.start(_global.PosPausa / 1000);
76 somPausado = false;
77 somParado = false;
78 mcPausa._visible=true;
79 mcPlay._visible=false;        
80 _global.verTime();  
81 }

Na linha 74, criamos a função para retomar a música após uma pausa. Na linha 75, retomamos a reprodução exatamente de onde ela foi pausada, de acordo com a posição gravada no momento da pausa (Linha 66). Setamos as variáveis de verificação como false, já que o som retornou (Linha 76 e 77). Habilitamos a visualização do mcPausa (Linha 78). Desabilitamos a visualização do mcPlay (Linha 79). Na linha 80 retomamos a contagem do tempo da musica.

82 _global.paraMusica = function (){  
83 _global.novoSom.stop();    
84 somPausado = false;
85 somParado = true; 
86 mcPausa._visible=false;
87 mcPlay._visible=true;         
88 _root.controles._visible=false;
89 _root.barra._visible = false;
90 _global.paraTime();
91 tTime.text="00:00";
92 tTime._visible=false;
93 }

Na linha 82, criamos a função que para a música. Paramos o som (Linha 83). Setamos como false a variável somPausado (Linha 84) e como true a variável somParado (Linha 85). Desabilitamos a visualização do mcPausa (Linha 86). Habilitamos a visualização do mcPlay (Linha 87). Desabilitamos a visualização dos controles (Linha 88) e da barra (Linha 89). Paramos o tempo da música (Linha 90). Preenchemos a caixa de texto tTime com o valor inicial (Linha 91) e desabilitamos a sua visualização (Linha 92).

Gerenciamento dos Butões

94 mcPlay.onRelease = function (){
95 if (somPausado==true && somParado==false){
96 _global.tiraPausa();
97 }else{
98 _global.tocaMusicaAtual();
99 }
100 };

Na linha 94, criamos a função que será chamada automaticamente após o botão mcPlay ser clicado. Na linha 95, verificamos se o som esta pausado, se sim tiramos a pausa (Linha 96), se não (Linha 97), toca música atual (Linha 98).

101 mcPausa.onRelease = function (){
102 _global.pausaMusica();
103 };

Na linha 101, criamos a função que será chamada automaticamente após o botão mcPausa ser clicado. Na linha 102, chamamos a função que pausa a reprodução da música.

104 mcStop.onRelease = function (){
105 _global.paraMusica();
106 };

Na linha 104, criamos a função que será chamada automaticamente após o botão mcStop ser clicado. Na linha 105, chamamos a função que para a reprodução da música.

107 controles.volAumenta.onRelease = function (){
108 if (vol == 100) {
109 vol += 0;
110 } else {
111 vol += 10;
112 _global.novoSom.setVolume(vol);                       
113 _root.controles.txtvolume.text=vol;                      
114 }
115 }

Na linha 107, criamos a função que será chamada automaticamente após o botão volAumenta ser clicado. Caso a variável vol for igual a 100 (Linha 108), aumenta 0 (Linha 109), ou seja, nada. Se não, aumenta 10 (Linha 111). Na linha 112 setamos o novo valor para o volume e preenchemos a respectiva caixa de texto (Linha 113).

116 controles.volDiminui.onRelease = function (){
117 if (vol == 0) {
118 vol -= 0;
119 } else {                
120 vol -= 10;            
121 _global.novoSom.setVolume(vol);
122 _root.controles.txtvolume.text=vol;
123 }
124 }

Na linha 116, criamos a função que será chamada automaticamente após o botão volDiminui ser clicado. Caso a variável vol for igual a 0 (Linha 117), diminui 0 (Linha 118), ou seja, nada. Se não, diminui 10 (Linha 120). Na linha 121 setamos o novo valor para o volume e preenchemos a respectiva caixa de texto (Linha 122).     

125 controles.balAumenta.onRelease = function (){
126 if (bal == 100) {              
127 bal += 0;
128 } else {                
129 bal += 10;           
130 _global.novoSom.setPan(bal);                 
131 _root.controles.txtbalanco.text = bal;                   
132 }
133 }

Na linha 125, criamos a função que será chamada automaticamente após o botão balAumenta ser clicado. Caso a variável bal for igual a 100 (Linha 126), aumenta 0 (Linha 127), ou seja, nada. Se não, aumenta 10 (Linha 129). Na linha 130 setamos o novo valor para o balanço e preenchemos a respectiva caixa de texto (Linha 131).

134 controles.balDiminui.onRelease = function (){
135 if (bal == -100) {             
136 bal -= 0;
137 } else {                
138 bal -= 10;
139 _global.novoSom.setPan(bal);                 
140 _root.controles.txtbalanco.text = bal;                   
150 }
151 }

Na linha 134, criamos a função que será chamada automaticamente após o botão balDiminui ser clicado. Caso a variável bal for igual a -100 (Linha 135), diminui 0 (Linha 136), ou seja, nada. Se não, diminui 10 (Linha 138). Na linha 139 setamos o novo valor para o balanço e preenchemos a respectiva caixa de texto (Linha 140).

Mostrando o Tempo das Músicas

152 _global.pegaTime = function (){   
153 var tempo = new Date(_global.novoSom.position);         
154 tTime.text = [formZeros(tempo.getMinutes(), 2), formZeros(tempo.getSeconds(), 2)].join(":");
155 _root.barra.barra_d._xscale = _global.novoSom.position/_global.novoSom.duration*100
156 }

Na linha 152, criamos a função que vai gerar o tempo. Na linha 153, declaramos uma nova instancia de objeto da classe Date. Na linha 154, preenchemos a caixa de texto do time com a junção dos minutos com os segundos, devidamente formatados (a formatação você vai entender logo abaixo). Na linha 155, setamos o tamanho da barra de acordo com o calculo da posição divido pela duração.
 _global.novoSom.duration = Retorna a duração de um som em milisegundos. _global.novoSom.position = Retorna a posição do som em milisegundos.

157 _global.verTime= function (){
158 var progresso = setInterval(pegaTime, 100);
159 _root.barra._visible = true;
160 }

Na linha 157, criamos a função que vai ser chamada nas nossas funções de controle do player. Na linha 158, criamos a variável progresso que recebe o método setInterval, que é usado para executar uma determinada função repetidamente respeitando um intervalo de tempo definido.O método setInterval retorna uma identificação, que posteriormente pode ser utilizada para cancelar a execução através da função clearInterval. Na linha 159, habilitamos a visualização da barra de progresso.

161 _global.paraTime= function (){
162 clearInterval(progresso);
163 }

Na linha 161, criamos a função que vai para a contagem do tempo, chamando o método clearInterval (Linha 162).

164 _global.formZeros = function(n, q){
165 var a1 = q - n.toString().length;    
166 var a2 = Math.pow(10, a1);
167 var a3 = a2.toString();
168 var a4 = a3.substr(1);
169 return a4 + n;
170 }

Na linha 164 criamos a função que formata os valores tempo.getMinutes() e tempo.getSeconds()  (Linha 154). Esta função irá acrescentar os zeros necessários para uma boa visualização. O parâmetro n da função,é quem recebe o numero que vai ser modificado, e q, recebe a quantidade total de dígitos que o n vai contar após a formatação. formZeros(tempo.getMinutes(), 2). Na linha 165, transformamos n em um string e contamos o número de caracteres que ela contém, dessa forma, podemos subtrair n (número) de q (total de dígitos). Por exemplo, se tivermos 1 e queremos 2 dígitos, temos 1 dígitos para um total de 2. Na linha 166, potenciamos nosso a1 à base 10, no nosso caso vai dar 10. Na linha 167, pegamos o valor de a2 e transformamos em um string. Na linha 168, pegamos o valor de a3 (string) e mostramos ele a partir da posição 1, dessa forma por exemplo o 1 de 10 não aparece, restando somente 0. Na linha 169, retornamos a4, que no nosso caso é 0 e somamos com n.

Final

Confira o player finalizado.

Arquivos

Verifique logo abaixo os fontes e o exemplo do player.

Observação importante

Ao colocar este projeto na internet nos deparamos com o problema de carregamento das músicas. Por isso tome cuidado com a taxa de bits dos arquivos mp3. Procure sempre acompanhar o tamanho das músicas e qualidade, para que tenhamos sempre um projeto bem elaborado. Procure um programa de edição e salve as mp3 que serão utilizadas com uma taxa de bits inferior a 128. Isso é muito importante, por isso preste atenção neste detalhe.

Bom, obrigado pela atenção. Bom estudo.

• plug-flash-playermp3.zip
• playermp3-exemplo.swf

• Flash e Orientação a Objetos