Há alguns dias estava lendo alguns artigos sobre HTML5, então me perguntei se existia algum player mp3 que suportasse a tecnologia. Não foi difícil encontrar scripts, o problema fica na questão visual dos players, todos os que eu encontrei possuíam um visual muito simples se comparado com os desenvolvidos em flash.

Dos scripts que encontrei o que mais me agradou visualmente foi o jPlayer, escrito em javascript com jQuery. Gostei dele porque além de suportar HTML5 ele ainda dá suporte para browsers antigos através de um arquivo flash para tocar mp3. O player pode ainda ser customizado através de css e na área de downloads é possível baixar vários exemplos de utilização do player, incluindo uma demo com playlist.

Depois de ter encontrado o plugin fui em busca de skins para este, mas não encontrei. Por isso decidi pegar uma skin de um player em flash e adaptar para o jPlayer para ver o quanto fiel seria possível se manter do original. Fiz uso do jQuery para construir as funções que iriam tratar do comportamento da skin e montei uma classe para organizar o código e facilitar a utilização da skin.

A skin que eu escolhi foi esta, ela é uma das várias skins do site MixPod que permite a criação de playlists e players personalizados.  A seguir eu irei mostrar como se utiliza a classe e para quem preferir no fim do post há um link para baixar todos os arquivos com exemplos. Eu pretendia explicar também como funciona a classe, mas como ela ficou um pouco extensa preferi deixá-la bem comentada e aqui apenas abordar a sua utilização. Sei que muita gente gosta de ver e depois baixar (incluindo eu), então segue abaixo um print de como ficou a skin:

O primeiro passo é adicionar os arquivos de estilo e os scripts necessários:

<!-- CSS Stylesheets for jPlayerSkin -->
<link href="skin/css/jplayer.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="all" href="skin/css/jScrollPane.css">
<!-- Scripts for jPlayerSkin -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayerskin.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jScrollPane.js"></script>

Dá para notar que eu também faço uso do jScrollPane, mas na verdade eu tinha pensado em utilizar uma div simples com scroll só que iria ficar muito feio e a idéia era tentar se manter fiel a skin original.

Depois de incluídos os arquivos necessários é só invocar a classe passando os parâmetros necessários: a string do objeto html onde ficará contido o player ; a playlist (opcional);  um inteiro indicando em que faixa o player irá se posicionar (opcional); e um boleano indicando se é para começar a tocar automaticamente (opcional).

<script type="text/javascript">
$(document).ready(function(){
    //The playlist to be loaded
    var myPlayList = [
        {artist:"Opeth",name:"The Lepper Affinity",mp3:"http://www.heavy-music.ru/gothic/Opeth/(2001)%20-%20Blackwater%20Park/01.%20The%20Leper%20Affinity.mp3",cover:"http://4.bp.blogspot.com/_BJs8mlnXmKQ/Rvxqy5_SqqI/AAAAAAAAD9o/ZGMhNOIea2U/s320/Opeth+-+Blackwater+Park.jpg"}
    ];
    //New instance of jPlayerSkin
    var skin = new jPlayerSkin( '#jplayer_container' , myPlayList );

    //Start the player
    skin.initialize();</p>
});
</script>

Por último é só criar o elemento onde ficará o player, assim:

<div id="jplayer_container"></div>

No arquivo que deixei no fim do post para download tem dois exemplos de como utilizar a classe, esta também está bem comentada, então não acredito que haverão grandes problemas em utilizá-la.

Eu gostei do resultado, só não gostei do tamanho total dos arquivos necessários para fazer o player funcionar com essa skin. Uma coisa que deixei de lado mas poderia ter utilizados era css sprites e a compressão do css e javascript. Uma limitação do jPlayer foi quanto ao slider de volume, tentei uzá-los na vertical mas o único jeito de fazê-lo funcionar ela modificando o plugin, coisa que eu fiz mas preferi encontrar outra alternativa.

Agora eu sei que se eu precisar de um player de mp3 eu posso usar o jPlayer ao invés de outro player em flash, com a vantagem de estar suportando uma quantidade maior de dispositivos.

Edit 1: Quando o player detecta um navegador com suporte para HTML5 ele utiliza a tag só que eu havia esquecido de fazer a inclusão do arquivo .ogg na playlist para que o player funcionasse com a tag, já que em HTML5 só há suporte de áudio para o formato .ogg. Erro corrigido e link de download atualizado.