[tutorial] Mp3 Player com dataGrid e XML

[Thiago de Oliveira Cruz 21]

Esse tutorial foi postado tbm em meu blog:

berseck.wordpress.com

 

Eae galera venho aqui mais uma vez dar uma colaborada para o povo que mexe com ActionScript2

=]

 

Nesse tutorial de hoje vou ensinar como fazer um player com um dataGrid selecionavel ;)

 

Bom sem mais delongas vamos ao que interessa :)

 

Para começar em seu palco você vai precisar

1 botão stop instanciado de bt_stop

1 botão play instanciado de bt_play

1 botão pause instanciado de bt_pause

1 botão de adiantar instanciado de bt_fow

1 botão de voltar intanciado de bt_bac

1 dataGrid instanciado de my_dg

2 MovieClips com o tamanho que você tiver interesse uma vai se intanciar de my_seek outra download

1 MovieClip onde vai ficar com a my_seek por cima como se fosse um loader instanciada de my_seekBar

1 MovieClip onde vai colocar por cima de toda do MovieClip my_seekBar instanciado de SeekPoint

1 campo de texto onde vai ficar o nome das musicas intanciado de txt_stat e com a variavel txt_stat

1 campo de texto onde vai ficar o tempo da musca intanciado de stempo e com a variavel stempo

1 MovieClip instanciado de volume

6 botões colocados um ao lado do outro intanciados em sequencia vol1 ao vol6 <-------- mude de cor neles animando dentro do MovieClip volume

 

Bom criado todos esses componentes vamos ao código:

 

//Importo as classes necessárias
import mx.controls.gridclasses.DataGridColumn;

//Uso codificação que leia os acentos
System.useCodepage = true;

//Minhas arrays
var mp3:Array = new Array(); //crio minha array onde vou carregar as musicas

//Variáveis
var mysound:Sound = new Sound(); // crio a variavel responsavel pelo som
mysound.onSoundComplete = inicia; // digo que ao completar a musica ele vai fazer a função para re-iniciala
var inic:Number = 0; //Numero incial da musica
var pos:Number = new Number(); //varivavel responsavel pela posição que a musica parou (tempo)

//Configurações do DataGrid
my_dg._x = 0;
my_dg._y = 100;
my_dg.setSize(400, 200);
my_dg.multipleSelection = true;

//Clicar na celula muda de música
dgL = new Object();
dgL.cellPress = function(evt_obj:Object){
	inic = evt_obj.itemIndex;
	iniciar();
	if(inic == 1){
		bt_play._visible = 1;
		bt_pause._visible = 0;
	}else{
		bt_play._visible = 0;
		bt_pause._visible = 1;
	}
}
my_dg.addEventListener("cellPress", dgL)
//Fim

//Style do DataGrid ou outros componentes se você for utilizar
_global.style.setStyle("color", 0x696969);
_global.style.setStyle("themeColor", "haloBlue")
_global.style.setStyle("fontSize",16);
_global.style.setStyle("fontFamily" , "OCR A Extended");
//Fim

//Função que vai carregar os Mp3
var my_xml = new XML;
my_xml.ignoreWhite = true;
my_xml.onLoad = function(success:Boolean) {
	if(success){
		var cont = my_xml.firstChild.childNodes;
		for(var i = 0; i < cont.length; i++){
			mp3.push(cont[i].childNodes);
			var dados:Object = {Músicas:cont[i].childNodes};
			my_dg.addItem(dados);
		}
		iniciar();
	}else{
		trace("erro ao carregar o xml");
	}
}
my_xml.load("musicas.xml");
//Fim

//Inicia o player
function iniciar(){
	mysound = new Sound();
	mysound.onSoundComplete = iniciar;
	if(inic == 0){
		bt_play._visible = 1;
		bt_pause._visible = 0;
		txt_stat = mp3[inic];
		mysound.loadSound(mp3[inic], true); // carrego a musica da array
		mysound.stop(); // dou stop assim que ele encontra a primeira musica para que ele n inicie tocando sozinho
		inic++;
	}else if(inic == mp3.length){
		mysound.onSoundComplete = function(){
			mysound.stop();
		}
	}else{
		txt_stat = mp3[inic];
		mysound.loadSound(mp3[inic], true);
		inic++;
	}
}
//Fim

//Botões
bt_pause._visible = 0;
//botão play
bt_play.onPress = function(){
	mysound.start(pos/1000); // coloco para tocar a musica na posição que ele estiver dividida por 1000 para transformar em segundos
	bt_pause._visible = 1;
	bt_play._visible = 0;
}
//botão para pausar a musica
bt_pause.onPress = function(){
	mysound.stop();
	bt_play._visible = 1;
	bt_pause._visible = 0;
	pos = mysound.position; // pego o tempo onde a música parou
}
//botão que para musica
bt_stop.onPress = function(){
	mysound.stop();
	bt_play._visible = 1;
	bt_pause._visible = 0;
}
//botão para adiantar musica
bt_fow.onPress=  function(){
	if(inic >= mp3.length){
		inic = mp3.length;
	}else{
		iniciar();
		bt_play._visible = 0;
		bt_pause._visible = 1;
	}
}
//botão para voltar musica
bt_bac.onPress=  function(){
	if(inic == 1){
		inic = 0;
	}if(inic == 2){
		inic -= 2;
		iniciar();
		bt_play._visible = 1;
		bt_pause._visible = 0;
	}else {
		inic -= 2;
		iniciar();
		bt_play._visible = 0;
		bt_pause._visible = 1;
	}
}
//Fim

//SeekBar
function intervalo(){
	var duracao = mysound.duration;
	var tempo = mysound.position;
	my_seek._width =  tempo / duracao * (my_seekBar._width - 2);
}
var timer = setInterval(intervalo, 100);

//Pega a posição da barra que você clicou e adianta ou atrasa musica.
SeekPoint.onPress = function(){
	bt_play._visible = 0;
	bt_pause._visible = 1;
	var duracao = mysound.duration;
	var tempo = mysound.position;
	my_seek._width = _xmouse - my_seekBar._x;
	pos = my_seek._width * duracao / (my_seekBar._width - 2);
	mysound.start(pos/1000);
}
//Fim

//botões de Volume
mc_volume.gotoAndStop(6);
mysound.setVolume(100);
mc_volume.vol1.onPress = function(){
	mysound.setVolume(0);
	mc_volume.gotoAndStop(1);
}
mc_volume.vol2.onPress = function(){
	mysound.setVolume(20);
	mc_volume.gotoAndStop(2);
}
mc_volume.vol3.onPress = function(){
	mysound.setVolume(40);
	mc_volume.gotoAndStop(3);
}
mc_volume.vol4.onPress = function(){
	mc_volume.gotoAndStop(4);
	mysound.setVolume(60);
}
mc_volume.vol5.onPress = function(){
	mc_volume.gotoAndStop(5);
	mysound.setVolume(80);
}
mc_volume.vol6.onPress = function(){
	mc_volume.gotoAndStop(6);
	mysound.setVolume(100);
}


//Tempo da musica
var ttimer = setInterval(intervalTimer, 1000);
function intervalTimer(){
	var duracao = mysound.duration/1000; // pego a duração total e divido por 1000 para transformar em segundos
	var time:Number = mysound.position/1000; // pego o tempo corrente da musica e divido por 1000 para transformar em segundos
	var myseekW:Number = my_seek._width;
	var percent:Number = (time / duracao * myseekW);
	if(time > 0){
		var integer:String = String((time*.0166)>>0); //faço o calculo para que ele entre como segundos
		var decimal:String = String((time%60)>>0); //faço o calculo de minutos
		stempo = String((integer.length<2)?"0"+integer:integer)+":"+((decimal.length<2)?"0"+decimal:decimal); //Coloco no campo de texto de tempo
	} else stempo = String("00:00"); //Caso não esteja começado a tocar a musica fica no 00:00
}
//Fim

//Loader
function DL(){
	download._width = mysound.getBytesLoaded() / mysound.getBytesTotal() * (my_seekBar._width - 2);
}
var tempoDL = setInterval(DL, 100);
//Fim

 

Bom é só espero que gostem ;)

 

Link para download CLIQUE AQUI

 

Abraços e até a proxima

[Freelife 2]

berseck... o tutorial é show... só não consegui fazer o xml... qual a estrutura dele?

 

Abraços

[Thiago de Oliveira Cruz 21]

xml ta assim

 

<?xml version="1.0" encoding="utf-8"?>
<mp3>
	<musicas>sample.mp3</musicas>
</mp3>

[Freelife 2]

vlw... funcionando...

 

Muito 10... Eu tava procurando uma barra como essa... já tinha tentado fazer mas sempre dava errado.

 

Abraços

[Thiago de Oliveira Cruz 21]

A barra de carregamento é a mesma ideia de um loading padrão só que com tempo e duração...

 

no caso de musica é posição que a musica se encontra e a duração

em player de video é timer + duração....

 

Altera o nome mas é sempre a mesma coisa :)

Basta dar uma lida no help que você acha rapidinho qual é o equivalente ;)

 

Abraços

[inx 4]

berseck existe a possibilidade de inserir uma busca no xml..?

=D

[Thiago de Oliveira Cruz 21]

Segue o link:

http://imasters.com.br/artigo/4265/flash/busca_em_array/

 

Ahh ... detalhe... o original desse código segue os padrões dessa busca ;)

 

E pode ver um sistema parecido de busca desse ai nesse site aqui:

www.velhochico.com/busca

 

Abraços