Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Site Elements
Webdesign

Criar um Player de Áudio personalizado

by
Difficulty:IntermediateLength:LongLanguages:

Portuguese (Português) translation by Joao Fernandes (you can also view the original English article)

Durante este tutorial vou introduzir-vos ao áudio em HTML5 e mostrar como podem criar o vosso próprio player.

Se preferir pode ver o produto final HTML5 Audio Player no Mercado da Envato. Com este player, é possível criar listas de reprodução (playlists) a partir de várias fontes e as opções de personalização são imensas.

HTML5 Audio Player with Playlist
Player de Áudio em HTML5 com lista de reprodução

Pode também encontrar muitos exemplos de HTML5 no Envato Studio


Introdução

Até ao momento, implementar áudio num website era um processo complicado e que dependia inteiramente de plugins como o Flash. Uma vez que o iPhone não aceita plugins e que a Adobe mencionou que não vai mais suportar o Flash para dispositivos móveis, muitos programadores estão à procura de outras opções para incorporar áudio nos seus projetos.  É aqui que o áudio HTML5 entra em acção para resolver o problema.

Embora o HTML5 seja o standard para a reprodução de ficheiros de áudio na web, ainda está numa fase muito inicial e tem um longo caminho pela frente até que seja capaz de fornecer tudo o que os outros plugins como o Flash fornecem. No entanto, na maior parte dos casos, é mais do que adequado. 


Áudio simples em HTML5

A forma mais simples para implementar áudio numa página web através de HTML5 é usando o novo tag de áudio. Implemente esta tag no documento de HTML5, usando o seguinte código: 

Prestando atenção ao código em cima, é possível verificar que declarei a tag <audio> e os atributos de controlo, de modo a que os controladores default do player sejam visíveis.

Dentro do <audio> temos 2 tags 'src'. Uma define a faixa MP3 e a outra define o formato OGG. O formato OGG é especialmente usado para permitir que a música toque no Firefox, uma vez que devido a licenças o Firefox não suporta MP3 sem usar um plugin. A seguinte mensagem O seu broser não suporta o elemento de audio. permite que os utilizadores com browsers incompatíveis saibam o que se passa.


O player de áudio HTML5 predefenido.

Atributos da tag de áudio HTML5

Para além de suportar atributos gerais de HTML5, a tag também suporta um conjunto de atributos próprios.

  • autoplay - Pode ser ativado usando "true" ou não, usando "" para definir se a faixa deve tocar automaticamente quando a página carrega. 
  • controlos - Como verificado pelo exmplo acima, este comando define se os controlos nativos como por exemplo 'play, pause' etc devem estar visíveis.
  • loop - "loop" define se a faixa deve tocar novamente após ter terminado.
  • preload - Este comando pode ser colocado em "auto" (singnifica que o ficheiro irá carregar assim que a página for carregada), "metadata" (significa que apenas a metadata, título da faixa etc. devem ser carregados), "none" (significa que o browser não deve carregar o ficheiro até que a página tenha acabado de carregar).
  • src - Este comando pode ser visto no exemplo acima e define o url da música que deve ser tocado pelo tag de audio.

Início

Nos passos anteriores, olhámos para a forma mais simples de áudio HTML5. Quando começamos a utilizar a tag áudio com javascript podemos começar a criar alguns players de audio realmente interessantes e úteis. Vamos agora ver o que o jQuery pode fazer por nós. Depois de definirmos o "document ready" em jQuery, podemos criar uma nova variável de áudio para manter o nosso arquivo de áudio tão simples como isto:

É realmente simples! Depois, sempre que quisermos executar uma ação com o áudio podemos usar a variável 'myaudio'. Aqui está uma lista de ações que podem ser usadas com a variável. Tome nota desta lista, iremos usar algumas destas ações mais tarde no tutorial quando criarmos o nosso player de áudio...

Se quiser que uma função seja chamada assim que terminar de tocar o áudio, pode usar o 'myaudio.addEventListener('ended',myfunc)' - isto irá chamar 'myfunc()' quando o áudio tiver terminado.


Criar o Player de áudio HTML5: Markup

Agora que já tem um pouco de conhecimento sobre áudio HTML5 e entende os princípios básicos, está na hora de colocá-los em prática e criar um player de áudio personalizado em HTML5. Vamos passar a fase de design à frente uma vez que não fica no âmbito deste tutorial. No entanto, pode fazer o download do código-fonte e navegar pelo PSD para obter uma ideia de como foi criado.

A parte superior do documento é composto pelo doctype do HTML5. Yahoos CSS Reset e a tipografia web do Google 'Lobster' foram usadas para o título. Em seguida temos a versão mais recente de jQuery e do ficheiro JavaScript  js.js. Finalmente, temos o html5slider.js que permite que o Firefox exiba o tipo de intervalo de entrada HTML5, que será usada para o marcador de áudio.

Após o título h1, criei uma div com uma classe de "container" e "gradient". Eu criei uma classe separada do gradiente para ser reutilizado em outros elementos. Dentro do ".container" adicionei uma imagem (que será a capa do álbum) e, em seguida, as três tags que vão atuar como os controlos para o player. Entre eles, pode encontrar o campo de entrada de gama scrubber/HTML5.


Criar o Player de áudio HTML5: Estilo

Em vez de ir a fundo em todos os aspetos de CSS, vou dar uma pequena passagem e realçar as partes mais importantes onde deve prestar mais atenção.

No código abaixo criei um degradê para o player que foi gerado usando este editor de degradê CSS. De seguida criei o player ".container" com algumas transições de CSS3.

Poderá ter notado que também usei a secção do atributo CSS3 como dimensionamento da 'border-box'. Isto permite o preenchimento de 10px em torno da margem para ser incluído dentro da largura que declarámos, neste caso 427px. Caso isto não tivesse sido usado, o preenchimento seria adicionado a largura de 427px fazendo o caixa maior do que eu realmente quero. Tem sido prática corrente aplicar * {box-sizing: border-box;} sendo uma forma mais intuitiva de aplicar estilo.  

Também adicionei algumas transições de CSS3 ao ".coverlarge" para permitir algumas transições agradável quando o player abre pela primeira vez. O CSS pode parecer um pouco assustador à primeira vista, mas a maior parte do conteúdo são prefixos para cada browser, de modo a garantir que o player de áudio parece e funciona da mesma maneira em diferentes browsers.


Como o player de áudio deve parecer nesta fase

Uma vez que área para o player está completa, é hora de criar os controladores. A maioria dos botões foram criados usando CSS sprites.

Infelizmente o IE ainda não suporta HTML5, pelo que decidi não mostrar o marcador de áudio aos utilizadores do IE. Se no seu caso necessitar de mostrar o marcador, pode usar o jQuery UI slider de forma idêntica ao que usei. No entanto eu optei por esconder o marcador da seguinte forma input{display:none\9!important;} . Basicamente, este código esconde o marcador dos utilizadores do IE (ver este tópico no Stack Overflow para mais informação na \9).

O problema com o marcador de áudio em HTML5 é que somente alguns navegadores oferecem suporte a estilos personalizados principalmente webkit navegadores (Chrome e Safari). Infelizmente, o Opera e Firefox apenas irão mostrar um marcador standard. Caso precise de personalizar o player em todos os browsers,  pode usar o jQuery UI slider, como mencionado anteriormente. Pode ver o estilo personalizado para os browsers de webkit no atributo input::-webkit-slider-thumb.


Como criar o Player de áudio em HTML5: jQuery

Quando o estilo e a marcação tiverem sido feitos, é hora de dar vida ao player. Podemos fazer isso usando o framework de javascript jQuery. Quando o jQuery document ready for declarado, crie algumas variáveis que servirão para armazenar os objetos de jQuery.

Na variável "song" pode ver que declarámos duas faixas. O formato OGG para Firefox e MP3 para outros navegadores. De seguida criei a condicional IF para que possamos verificar se o navegador pode tocar ficheiros MP3 ou não. Se o navegador puder, então a varíavel "song" vai tocar a faixa em MP3 - Caso contrário, vaiu tocar o ficheiro 'OGG'.

De seguida vamos criar as funções para os cliques, que nos permitirão iniciar e pausar a música. Neste caso usei a acção play() para começar a tocar o áudio, de seguida usei o método de jQuery replaceWith que basicamente substitui o botão de play pelo de pausa.

Adicionei também as classes "coverLarge" e "containerLarge" ao "container" e "cover". Como adicionei transições de CSS3 a estas classes previamente no CSS, vou adicionar uma transição para quando o áudio começar a tocar. A função de "pause" funciona de uma forma similar, mas sem efeito de transição. Quando clicado, o botão de pausa é substituido pelo botão "play".

O botão de mute funciona de forma semelhante ao butão de play e pausa, apenas sendo diferente nas funções que tem associado.

Quando os utilizadores carregarem em no botão "close" o jQuery vai ser chamado para remover a classe "containerLarge" e "coverLarge". Isto vai fazer com que a "cover" fique invisível e que o player se feche. De seguida, pausamos o player usando a acção pause () e fazemos o reset ao currentTime do áudio, que fica igual a 0. Isto faz com que a faixa de áudio regresse ao início.

Vamos agora passar ao marcador de áudio, o qual tem como id "seek". A primeira função é fazer com que possamos mover o marcador e avançar para qual parte do áudio. Isto é feito através da detecção de uma alteração sempre que alguém move o marcador. De seguida fazemos com que o song.currentTime seja igual à parte do áudio para onde movemos o marcador. Para terminar, é importante definir a duração máxima da faixa através do atributo max.

Por último em jQuery, temos de fazer com que o marcador "#seek" se mova com o decorrer da duração do áudio. Para tal, necessitamos de adicionar o evento "listenner" e quando o tempo atualizar, iremos chamar esta função. Eu defeni a variável "curtime" para refletir o songtime. De seguida, atualizei o valor do macardor de áudio para refletir a posição do tempo currente do áudio.

E está feito! Um player em HTML5 que pode implementar no seu site ou aplicação.


Conclusão

Como já foi referido anteriormente, o áudio em HTML5 ainda está numa fase muito inícial e tem bastante para melhorar. De momento, o áudio HTML5 foi concebido para tocar música necessitando para tal de um servidor multimedia, o que vai fazer com que alguns navegadores tenham problemas com a reprodução. Nem sempre isto será a fonte do problema, mas simplesmente significa que por vezes irá começar a tocar o áudio antes deste ter sido descarregado por completo.

Isto poderá ser um problema caso deseje utilizar o áudio HTML5 para efeitos sonoros de jogos ou aplicações que recorram a áudio de forma intensiva. Por este motivo os nossos amigos da Google criaram um método para melhorar o problema das tags de áudio. A Google desenvolveu uma proposta para a W3C para "Web Audio API". Isto prova que existe bastante espaço para melhorar o áudio HTML5, no entanto o problema é que de momento ainda só é suportado pelo Chrome.

Mais informação relativamente à Web Audio API da Google pode ser encontrada na página de código da Google ou nas especificações de web áudio.

Espero sinceramente que tenham apreciado aprender mais acerca de áudio em HTML5 e como podem criar os vossos próprios players. O meu player inclui controladores básicos, mas nada o impede de adicionar outros conteúdos, como por exemplo uma opção para controlar o volume ou até adicionar as suas próprias animações. Com um pouco de creatividade e experimentação pode criar players de áudio fantásticos. Faça o download o código fonte e fico a aguardar pelos vossos players!

E, caso esteja interessado em ver mais exemplos de players de áudio e outros elementos de media em HTML5, pode passar pelo Mercado da Envato e ver os items de HTML5 Media.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.