Montando um player com js e css.

Neste tutorial você vai aprender a montar um player para o seu site com javascript.

Mas por que criar um player com js?

Simples: Design. Você pode querer um player que seja visualmente mais semelhante as linhas de design do seu site, ou que tenha a mesma aparência em todos os navegadores.

Como você pode ver nas imagens acima o player do chrome e do fairefox são muito diferentes, e também podem não combinar muito com o design do seu site.

Montando o player

Se você ja leu o nosso post sobre as funções javascript aplicadas ao player você ja deve entender praticamente todos os arquivo abaixo: a única mudança e o uso do intput[type=range] para controlar o volume e o progresso do audio.

Como foi possível ver na demo do projeto acima, nos tivemos alguns pequenos bugs:

• O controle parece estar meio “doido”
• O range de volume não zera ao ser acionado o mute.
• Está muito feio!!!

Melhorando o controle de progresso do player

E meio confuso mais vou tentar explicar: o valor do range e atualizado constantemente, o que inclui o tempo em que você está clicando no seletor do range. Para corrigir isto nos vamos cancelar esta atualização durante o periodo do click, com jquery.

Montando o mute do player

Está é simples: quando o mudo estiver pressionado o range zera, quando não ele volta ao volume anterior. Da pra fazer tudo com jquery:

Melhorando a aparência

Agora ja temos um pllayer funcional, mas com um porém, um player feio, de desejar manter as marmotas dos player loucos dos navegadores. Resolver isto é simples: temos de colocar um pouco de css:

E uma estilização um pouco complexa, mas talvez depois eu faça um post sobre css aplicado sobre input[type=range].

Esta Gostando deste post? Saiba que ele faz parte de uma série sobre multimidia aqui do meu blog que vale a pena dar uma conferida:

• Como manipular Player Html5 com javascript.
• Montando um player com html e css.

Conclusão

Isto aqui foi so uma base com as ideias para você se divertir, saiba que existem muitas outras opções de multimídia, graças ao html5. Se você sentiualguma dificuldade não deixe de conferir o nosso post sobre Como manipular Player Html5 com javascript.

É não deixe conferir os posts do nosso Blog!!!