Criando um mp3player
Olá comunidade,
hoje em dia é muito comum você entrar em um site e lá ter um swf que funciona como se fosse coom um mp3player, com botões de play, stop, avancar, controle de volume e ainda mostrar o nome da música e seu álbum. Um exemplo disso é o site da banda Tangerine Dream.
Primeiramente vamos ver quais os elementos e as fuções principais de um player:
Um player tem as funções play, stop, pause, avançar, controle de volume e ele exibe também o volume, o nome do artista e o nome da música.
As funções de play, stop, pause podem serem feitas utilizando os principais comandos da classe Sound() que são o play, stop.
Já o controle de volume pode ser ajustado através o getVolume e do setVolume.
E para resgatarmos o nome da música e do artista usaremos o ID3.
Mas o que é ID3?
ID3 é um conjunto de informações que fica alocado numa mp3 contendo o nome da música o álbum, o artista e etc.
O flash resgata essas ifromações através de comandos simples:
objeto_da_classe_sound.id3.propriedade;
propriedade descrição
album álbum da música
genre gênero da música
songname nome da música
artist nome do artista
Só tem um problema ao se trabalhar com a id3, se os dados não estiverem configurados, nao aparecerá nada no nosso player.
Como configurar a id3 da minha MP3?
O Winamp, altera e adiciona esses dados a um mp3. Para cofigurar a id3 de sua mp3, abra o winamp, clique com o botão direito no nome da mp3 que você quer configurare vá em "view file info (alt+3)" como mostra a figura abaixo:
Daí é só alterar os dados como mostra a figura abaixo e clicar em update para finalizar.
Agora que já está tudo esclarecido sobre id 3 e o que fará o nosso player, vamos aos objetos necessários para o player.
Para criar o player usaremos 6 botões: um para stop, um para play, um para pause, um para avançar e dois para controle de volume. E precisaremos também e 3 campos de texto do tipo dinâmico: para mostrar o volume, o nome da música e o nome do artista. Como mostra a figura abaixo:
Depois instanciamos os botões com as seguintes instâncias:
botão de play = play
botão de stop = stop
botão de pause = pause
botão avançar = ff
botão para aumentar volume = v1
botaõ para diminuir volume = v2
Para instanciar um botão é só seleciona-lo, ir em propriedades e no campo instance name digitar a instância.
Coloque instâncias nos campos de texto também
campo para o nome do artista = artista
campo para o nome da música = musica
campo para o volume = v3
Bom, depois dos elementos do player criados e instanciados, crie outra camada, renmeie ela para acoes, abra o painel actions (f9) e vamos para a programação.
Vamos começar declarando as variáveis a serem usadas, no formado definido pelo as 2.0, sendo "var variavel:tipo_da_variavel":
//objeto que ira manipular o som
var som:Sound = new Sound();
//vetor que ira armazenar o caminho das mp3 a serem tocadas
var musicas:Array = new Array();
//declarando o resto das variaveis
var i, vol, verifica, pos:Number;
var ligado:Boolean;
var acao:String;
agora vamos atribuir ao vetor o caminho das mp3 a serem utilizadas:
stop();
musicas[0] = "audio/audio1.mp3";
musicas[1] = "audio/audio2.mp3";
musicas[2] = "audio/audio3.mp3";
vamos fazer um if que ira verificar se o player ja esta tocando se ele não estiver ligado, ele definira o volume como máximo e a posição inicial para a mp3 a ser tocada:
if (ligado==null) {
i = 0;
vol = 100;
ligado = false;
}
Na rotina abaixo, especificamos que quando iniciar o frame o volume do som sera o valor setado na variavel vol.
this.onEnterFrame = function() {
som.setVolume(vol);
No if abaixo verificamos se o player esta ativado e ele estiver desativado, ele ira carregar a musica a ser tocada.
if (ligado==false) {
som.loadSound(musicas[i], true);
Como estamos usando apenas 3 musicas nesse player nosso vetor vai da posição 0 ate 2 por isso fiz a rotina abaixo que faz com que o valor de i, que é a variável que esta controlando a música a ser tocada, não passe de 2.
if (i<2)
i++;
else
i = 0;
agora definimos que o player esta ligado e fechamos o 1º if
ligado = true;
}
Através do id3, pegamos o nome do artista e da música e colocamos esses dados nos campos de texto que instanciamos acima.
artista.text = "Artista: " + som.id3.artist;
musica.text = "Musica: " + som.id3.songname;
A rotina abaixo pega o volume do som através da propriedade getVolume(); da classe sound, e verifica se ele é maior que o valor máximo (100), e se for ele deixa o volume com o valor máximo, ele também verfica se esta abaixo do valor mínimo (0) e se estiver ele atribui ao som através do método setVolume o valor mínimo ao volume. E no final ele atribui ao campo de texto v3 o valor do volume atual e fecha a função.
verifica = som.getVolume();
if (verifica>=100) {
som.setVolume(100);
}
if (verifica<=0) {
som.setVolume(0);
}
v3.text = som.getVolume() + "%";
}
Nos comandos abaixo através do evento onSounComplete eu aviso ao flash que o som já foi finalizado, fazendo com que a próxima música seja tocada.
som.onSoundComplete = function() {
ligado = false;
}
Agora vamos as funções de cada botão:
Obs: devem serem digitadas juntos com as actions acima no 1º frame da camada ação.
No botão que aumenta o volume (v1) eu pego o valor do volume e adiciono + 5. E no botão que diminui o volume eu faço o contrário, pegando o volume e diminuindo por 5.
//aumenta o volume
v1.onRelease = function() {
verifica = som.getVolume();
vol = verifica+5;
}
// diminui o volume
v2.onRelease = function() {
verifica = som.getVolume();
vol = verifica-5;
}
No botão stop eu apenas uso o método stop para parar o som;
// para muscia
stop.onRelease = function() {
som.stop();
}
Na ação do botão pause eu atribuo a variável ação o valor "pause" para eu saber quando está sendo pausado e através da propriedade position eu pego o valor da posição atual em que a música está e armazeno na variável pos que será utilizada futuramente e paro a música através do método stop.
// pausa a musica
pause.onRelease = function() {
acao = "pause";
pos = som.position/1000;
som.stop();
}
Para o botão play eu usei um if para saber se devemos continuar a música ou se devemos apenas iniciá-la desde o começo. Por isso avia criado a variável ação, se o valor dela for "pause" irei continuar a música desde a parte em que ela foi parada senão irei iniciá-la desde o começo:
play.onRelease = function() {
if (acao=="pause") {
som.start(pos);
acao="";
} else {
som.start();
}
}
E finalmente o botão avançar. Sua ação é bem simples, apenas paro o som e defino a variável ligado como false, falando para o flash ir para a próxima musica.
ff.onRelease = function() {
ligado = false;
som.stop();
}
Como viram eu usei 3 mp3 nesse player mas você pode utilizar quantas quiser. Para isso é só adicionar mais posições para o vetor ex:
musicas[3] = "audio/audio4.mp3";
musicas[4] = "audio/audio5.mp3";
e na parte em que é verificado se o i (variável que controla a posição do vetor) esta dentro do limite, no caso do player era 2 agora com essa alteração passa a ser 4.
if (i<4)
i++;
else
i = 0;
Então aqui vocês aprenderam como fazer um player, se aprofundando um poco mais no as 2.0 vendo como as váriaveis são declaradas nessa nova versão do actionscript. Foi visto também vários métodos da classe sound, inclusive o ID3. Após tudo isso o resultado final deve ser o seguinte:
Abraços e até a próxima!!
Andrews Patrick Rocha Medina
se este tia judar é o mesmo do link
Edição feita por: juniorjtb, 05/05/2005, 15:03.
player.jpg 9.39KB
5 downloads
