Player de música

Coluna Flash – Player de música

Olá amigos do MXStudio,

Meu nome é Felipe Gomes e esse é meu primeiro (espero que de muitos) artigo aqui no MXStudio.

Para começar, escolhi algo que não é complicado de fazer mesmo para quem não tem muita prática no ActionScript, mas que é muito interessante para ser inserido nos sites e outras aplicações que possamos desenvolver: um player de música.

Mãos a obra?!

Comece desenvolvendo um layout para seu player, lembrando que ele terá as seguintes informações:

Artísta, nome da música, nome do álbum e botões para avançar e voltar de música, play, stop e pause.

O meu player ficou da seguinte forma:

Preview do Player

Depois de definir o layout do player, vamos criar os três campos necessários, que mostrarão o nome do artísta, nome da música em execução e o álbum a que percente.

Vamos criar agora a layer (camada) em que os campos com as informações da música ficarão.

Para criar uma nova layer, vá ao menu Insert (Inserir) > Timeline (Linha do tempo) > Layer (Camada). Renomeie a layer criada para “informações” – sem aspas.

Agora criaremos os três campos. Primeiramente o campo “Artísta”.

Selecione a Text Tool (Ferramenta de texto) na barra de ferramentas e insira o campo onde desejar, lembrando de deixá-lo com uma largura que caiba o nome do artísta corretamente.
É preferível criar campos grandes, pra que os nomes não sejam cortados.

Após criar o campo, na barra de propriedades, digite “artista_txt” – sem aspas – no campo “<Istance Name>” (Nome de instância). E defina o campo como “Dynamic Text” (Texto dinâmico).

Observe a figura abaixo:

Nome de instancia

Repita o processo três vezes, apenas trocando o nome de instância para “musica_txt” e “album_txt” – ambos sem aspas.

Agora que você já tem os três campos criados, vamos aos botões que controlarão o player.

Crie uma nova layer (camada), e dê o nome de “controles”.

Vamos criar primeiro o botão de play, depois basta repetir o mesmo processo para os outros botões que usaremos.

Com a ferramenta Shape Tool (Forma), crie um botão que será o ícone do play.
Após criar a forma, selecione-a e pressione “F8”, na janela em que se abrir, digite “play_btn” no campo “Name” (Nome) e escolha a opção “Button” (Botão).

Observe a imagem abaixo:

Convert to Symbol

Após isso, selecione o botão e na barra de propriedades mude seu nome de instância para “play_btn”.

Para criar os demais botões de avançar, retroceder, stop e pause, repita os mesmos passos, apenas alterando o nome do botão e nome da instância.

Seguem abaixo os nomes:

Play – play_btn
Stop – stop_btn
Pause – pause_btn
Next – next_btn
Previous – previous_btn


Obs
: Lembrando que Next significa “próximo” e Previous, “anterior”.

Bom, agora que já temos os campos de informações e também os botões que controlarão as músicas, vamos às actions!

Vamos inserir todas as ações na raiz do filme, dessa maneira fica mais fácil programar no Flash, pois toda a programação fica num só lugar, sendo mais fácil de administrar tudo.

Quem tem costume de colocar as ações em cada símbolo, frame, etc., separado, estranha numa primeira vez, mas logo percebe que essa maneira facilita muito a programação no Flash.

Crie uma nova layer, dê a ela o nome de “Actions” – sem aspas.

Selecione o primeiro frame da layer que acabamos de criar, e pressione “F9”, para abrir a paleta Actions.

Digite a ação abaixo:

  1. stop();
  2. /* Criando objeto som_sound */
  3. var som_sound:Sound = new Sound();
  4. var numero:Number = 1
  5. function music() {
  6. /* Carregando som_sound */
  7. som_sound.loadSound(“musica.mp3″, true);
  8. _root.onEnterFrame = function() {
  9. /* exibe o nome da música no campo musica_txt */
  10. artista_txt.text = som_sound.id3.artist;
  11. musica_txt.text = som_sound.id3.songname;
  12. album_txt.text = som_sound.id3.album;
  13. }
  14. som_sound.start();
  15. }
  16. link_btn.onRelease = function() {
  17. getURL(‘http://www.felipegomes.com.br’, ‘_blank’);
  18. }
  19. link2_btn.onRelease = function() {
  20. getURL(‘http://www.mxstudio.com.br’, ‘_blank’);
  21. }
  22. music();

Agora irei explicar linha por linha:

Linha 1 – Ação stop() para parar o filme.

Linha 3 – Cria-se o objeto de som “som_sound”.

Linha 4 – Cria-se a variável “numero”, com o valor inicial igual a 1 (um).

Linha 5
– Cria-se a função “music”, que será responsável por fazer o player funcionar.

Linha 7 – Define-se o caminho da música ao objeto de som “som_sound”, substitua “musica.mp3” pelo nome de sua música. O atributo “true” informa que a mp3 será carregada em streaming.

Linha 8 – Cria-se uma função que será executada a cada frame do filme.

Linha 10 – Aqui dizemos para o campo de texto “artista_txt” exibir o nome do artista que estiver setado na tag ID3 do arquivo .mp3 que estiver em execução.

Linha 11 – Aqui informamos que o conteúdo do campo de texto “musica_txt” exibirá o nome da música que estiver setado na tag ID3 do arquivo .mp3 que estiver em execução.

Linha 12 – Aqui informamos que o conteúdo do campo de texto “album_txt” exibirá o nome do álbum que estiver setado na tag ID3 do arquivo .mp3 que estiver em execução.

Linha 13 – Encerra-se a função “onEnterFrame()”.

Linha 14 – Função “start()” do objeto “som_sound” que faz a música ser iniciada.

Linhas 16 a 18 – Função criada a partir do evento “onRelease()” do botão “link_btn” que executa a abre o site “www.felipegomes.com.br”, em nova janela.

Linhas 19 a 21 – Função semelhante à citada acima. Porém é executada no evento “onRelease” da instância “link2_btn” e abre o site do MXStudio.

Linha 22 – Chama a função “music()”.

Pronto, agora é só testar e conferir seu áudio rolando em streaming.

Muito fácil, não?

Bom galera, espero que tenham gostado desse meu primeiro artigo aqui no MXStudio.

Em breve desenvolverei um outro artigo sobre player, que será uma continuidade desse.

Implementaremos os controles de som, tais como: avançar, retroceder, play, stop e pause.

Um abraço a todos,

Autor: Felipe Gomes

Qualquer dúvida envie um email para contato@felipegomes.com.br ou acesse o nosso fórum.

Escrito por Felipe_Gomes on dezembro 20, 2005. Arquivado em Flash. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo

26 respostas a Player de música

  1. Olá Felipe, gostaria de saber se é possível eu colocar um loop nesse player… para que a música fique repetindo até o usuário clicar no botão de avançar.
    No meu site eu tive que colocar arquivos mp3 imensos repetindo várias vezes a música (mas uma hora a música acaba, ne? .. rsrs)
    Então, se você puder me ajudar com isso.
    Aproveito para agradecer pelo player, é de muita serventia para meu site.
    Obrigado.
    Abraços.

  2. Hey… desculpa se falo bobagens. Mas onde estão as programações dos botões?

  3. Primeiramente esse artigo do Felipe é otimo, mas como é um pouco antigo talvez ele não responda, por isso vamos contar com a ajuda das pessoas que fizeram o player e só aprimoraram, por exemplo saber como adicionar mais musicas, fazer a musica passar para seguinte sem clicar em next, essas coisas a 2ª parte do tutorial esta aqui nesse link http://www.mxstudio.com.br/views.tutorial.php?act=view&cid=3&aid=765

  4. Ola estou desenvolvendo um site para um dupla de cantores, e gostaria desse player de musica, para inserir no site, alem do tutorial ser facil, gostaria muito de fazer o download do player já pronto,

    poderia deixar o link para download?

    Abraços

  5. Onde coloco as músicas? Felipe, vc não fala sobre as músicas. Se quero um player pra tocar um cd completo, 10 musicas, onde coloco as músicas?
    Me ajude, por favor.

  6. vc deve colocar o som onde esta salvo o seu arquivo fla.
    fica mais facil.

  7. Aqui deu problema… fiz tudo certo, quando vo cola o código no “Action” da erro, dai eu arrumo umas aspas la e cola normal…
    Quando vou abrir pra escutar a música num da nada… Fica a tela la com Artista, Música e Album em branco, e mesmo clicando em “Play” n começa!
    Alguem pod ajuda?

  8. Ai galera HELP!!Por favor!!
    Tenho o player flash pronto e funcional…quando executo o arquivo com o botao direito>depois executar com o browser funciona blz…so que quando coloco ele no site que estou fazendo ele ate aparece o player so que nao roda…tipo parece que ele nao consegue puxar o xml para funcionar…tipo eu to colocando ele na Index do site e pelo dreamweaver eu coloco insert > movie > flash e esta do mesmo jeito eu fix o arquivo.swf no flash pro 8 e estou usando o Dreamweaver mx 2004 tem alguma coisa haver…Por favor aguente da uma ajuda…obrigado desde de ja!!

  9. Saudações.
    Estou praticamente começando agora, cheguei a colocar um play no meu site, mais é “EMBED”, me parece que não anda funcionando direito em outros sistemas!
    Vou experimentar esse sistema em flash, porém não entendo nada de flash, vou quebrar a cabeça com isso, mais tenho certeza que um dia, um dia eu vou conseguir!
    Agradeço por existir seu Site, muito obrigado.

  10. alguem conseguiu fazer?

  11. por favor… está dando o seguinte erro aqui…
    alguem sabe oq fazer???

    Error opening URL “file:///C|/xampp/htdocs/sheikloko/Site/flash/undefined”

  12. Nem deu no meu….
    =/
    Apesar de bem explicado…
    Quando vou colar as actions, da ERRoOooO
    = /

  13. E aí Felipe, blz?
    Segui a risca td’s os passos, mesmo assim quando coloco as actions, dá erro. E tbm gostaria de saber o endereço de onde as musicas são carregadas.
    Seria possivel enviar por e-mail esse player pronto pra mim comparar onde existem erros?
    valew pelo tuto.
    teh mais

  14. gostaria de saber como fazer um player igual a desse site http://bandagranada.com.br/
    desde ja grato !!!!!!!!!!!!!!!!

  15. Pessoal, creio que há alguns erros de sintaxe no código, por isso tantos problemas no código.

    Pessoal ao colar o código, editem removendo o numero, o ponto e o espaço que esão antes de cada linha, ficando:

    stop();
    /* Criando objeto som_sound */
    var som_sound:Sound = new Sound();
    var numero:Number = 1

    Na linha 7 do código: som_sound.loadSound(”musica.mp3?, true);
    troquem as aspas duplas, por aspas simples: ‘musica.mp3′

    Para os botões:
    Podem utilizar Behaviors mesmo, no caso do stop, vc adiciona a behavior “Stop All Sounds” e no botão play, pode usar a behavior “Load Streaming MP3 file”

    Para o arquivo, deve ser ActionScript 2.0
    Após estas modificações, meu player funcionou perfeito.

  16. Onde está as actions dos botões?

  17. Olá felipe.
    meu velho vc esplico tudo bem esplicadinho mais pa nao consegui fazer, tipo como q vai da player nas musicas q eu qru, tentei salvar tudo na pasta a onde ta o player mais msmo assim nao deu o velho c vc poder me ajuda eu agradeço ah e eoutra c tiver msn pra me ajudar seria melhor ainda o msn eh o msn eh ckecosom@hotmail.com abraço

  18. Olá amigo, tentei, tentei, tentei, e não deu certo, nem com a correção proposta, ele apresenta o seguinte erro:

    Error opening URL ‘file:///C|/Users/0/AppData/Local/Temp/Site.mp3′

  19. Pessoal, aqui funcionou legal!!!
    Só com uma ressalva.
    Quando copiei o código inverteu as aspas, daí tive que corrigir uma por uma. Daí funcionou.
    Espero ter ajudado.

  20. Ola a todos,

    Para que o código funcione corretamente, sem erros, basta incerir 3 musicas:

    musica1, musica2, musica3 (é necessário que sejam todas em formato mp3 e com os devidos nomes)

    As musicas devem ficar no mesmo local onde se encontra o arquivo .swf.

    Copiar o seguinte codigo no layer “actions”:

    stop();

    //Criando objeto som_sound
    var som_sound:Sound = new Sound();
    var numero:Number = 1;

    /*cria-se a função music com o parâmetro “musica” que indicará a música que será tocada pelo player.*/
    function music(musica) {
    //criando todas as variáveis necessárias
    var pos, verifica;
    /*a função “loadSound” carrega a mp3 no objeto “som_sound”, com o caminho
    especificado no parâmetro “musica”; true informa que será carregado por streaming*/
    som_sound.loadSound(musica, true);

    _root.onEnterFrame = function() {
    //exibe o nome da música no campo musica_txt
    artista_txt.text = som_sound.id3.artist;
    musica_txt.text = som_sound.id3.songname;
    album_txt.text = som_sound.id3.album;
    som_sound.setVolume(vol);
    };

    //ações dos botões para a música
    stop_btn.onRelease = function() {
    som_sound.stop();
    };

    //pausa a música
    pause_btn.onRelease = function() {
    acao = ‘pause’;
    pos = som_sound.position/1000;
    som_sound.stop();
    };

    //dá o play
    play_btn.onRelease = function() {
    if (acao == ‘pause’) {
    som_sound.start(pos, 1);
    acao = ”;
    } else {
    som_sound.start();
    }
    };
    }

    previous_btn.onRelease = function() {
    if (_root.numero1) {
    _root.numero -= 1;
    }
    else{
    _root.numero = 3;
    }
    musica = ‘musica’+numero+’.mp3′;
    music(musica);
    };

    next_btn.onRelease = function() {
    if (_root.numero3) {
    _root.numero += 1;
    }
    else{
    _root.numero = 1;
    }
    musica = ‘musica’+numero+’.mp3′;
    music(musica);
    };

    //=========================
    musica = ‘musica’+numero+’.mp3′;
    music(musica);

    Desta maneira vai da tudo certo… :)
    Abraços.

  21. Galera .. quando verifiquem as aspas nos actions.. isso que está dando erro… apague e digite elas novamente…

  22. sera que tem como vcs fazerem uma video aula de um player de web radio com aquelas barras que sobem e desse chama se spectrum mas que capture o som que ta saindo do pc se fizerem me avise samuraiomega@hotmail.com

  23. o meu script da erro fala que esta ba janela de saida pq?

  24. Oi tudo joia
    já tentei os dois codigos mas ta dando um erro

    String literal was not properly terminated
    Syntax error.
    Unexpected ‘}’ encountered

  25. eu não aprendir nada me ajude a fazer um player para meu blog que eu possa adicionar mais musicas depois me responda obrigado

  26. são as aspas que estão dando errado ¬¬ ja falaram isso la em cima, as aspas nas actions

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>