Diversos

Como Criar Player de Áudio no WordPress com o SoundManager 2

Google+ Pinterest LinkedIn Tumblr
Anúncios Google

Se você costuma inserir áudio em suas postagens mas não quer só os link simples que o WordPress oferece, é obrigado a fazer a marcação de um player em HTML5 – que não é tão difícil – ou procurar uma aplicação mais elaborada e compatível (navegadores antigos sempre causando problema…).

Como usar só Flash não é muito recomendável pela velha questão de plugins, o mais interessante pra ter compatibilidade ampla com tantos navegadores e dispositivos é garantir que, caso o visitante não possa usar HTML5, o Flash entre ação, e vice-versa.

Com esse propósito, temos uma boa opção grátis no SoundManager 2, API Javascript para áudio em MP3 e HTML5 que já vem com esse lado “híbrido” de Flash. Não é um sistema tão novo, mas continua sendo mais que eficiente.

Site do Sound Manager 2.

O que ele faz é transformar links para arquivos de áudio em botões, com funções como execuções em listas (playlists), marcadores de tempo, anotações e mais. A biblioteca é bem rica e o resultado é parecido com o de sites como o LastFM e o MySpace.

Ele é tão completo que eu levaria umas três páginas pra cobrir tudo, então vamos ficar nos básicos, como botões e miniplayers, alguns com barra de progresso e até opções mais avançadas como visualizador de onda. Se precisar de mais, leia os extensos arquivos de ajuda que acompanham o pacote.

Depois de baixar os arquivos no site, descompacte e coloque onde achar melhor no seu servidor (dentro da pasta do seu template?). Cada modelo de player que está dentro da pasta demo deve ser chamado com os devidos scripts e estilos, é só olhar as páginas de exemplos individuais (as páginas index.html dentro de cada pasta de modelo, como 360-player, page-player, etc).

Se preferir, você pode reorganizar os arquivos e pastas, mas vou mostrar os caminhos para as pastas como elas vêm no pacote, pra não confundir.

360º UI

É o mais “famoso”, com aquela barra de progresso em volta do tempo de duração, parecido com os previews do LastFM. Insira na seção head do seu template (pode ser logo antes do fechamento da tag header, no arquivo header.php):

Nota: não esqueça de corrigir os “href” mostrados em todos os próximos exemplos com o url de onde você colocou seus arquivos. Esses daqui são só de exemplo!
<link rel="stylesheet" type="text/css" href="soundmanager/demo/360-player/360player.css" />

<!--[if IE]><script type="text/javascript" src="soundmanager/demo/360-player/script/excanvas.js"></script><![endif]-->

<script type="text/javascript" src="soundmanager/demo/360-player/script/berniecode-animator.js"></script>

<script type="text/javascript" src="soundmanager/script/soundmanager2-nodebug-jsmin.js"></script>

<script type="text/javascript" src="soundmanager/demo/360-player/script/360player.js"></script>

<script type="text/javascript">
soundManager.setup({ 
// caminho para a pasta contendo o SWF do SM2 
url: 'url/swf/' 
}); </script>

<link rel="stylesheet" type="text/css" href="soundmanager/flashblock/flashblock.css" />

Já está com os arquivos de áudio no computador? Envie-os para seu servidor (não fique fazendo hotlink por aí, hein?) com o gerenciador de mídia do WordPress e depois do upload completo, clique em “Editar” e copie o url do arquivo quando for usar.

audio upload wordpress

Lembre-se que o WordPress tem um limite no tamanho do arquivo (geralmente 2MB) e se a faixa for maior, o upload vai falhar.  Nesse caso, você tem que alterar o arquivo PHP.INI do seu blog (coisa que nem todo servidor permite), ou mais fácil: envie o arquivo para alguma pasta do servidor via FTP.

Já com links para os arquivos de áudio que quer usar, use a marcação para exibir o player:

<div id="sm2-support">
<!-- Desculpe, não pude executar corretamente. -->
</div>

<div class="ui360"><a href="url-do-arquivo.mp3" class="norewrite exclude button-exclude inline-exclude">Título da música</a>
</div>

Tem muitos outros atributos, mas vamos ficar nisso por enquanto.

360° UI + Ondas

Precisa de um player maior e com mais frescuragens recursos tipo visualização de onda? Então tente esses que são bem maiores e podem ser exibidos em bloco ou lista.

Além do que já tinha inserido na head antes, junte (não remova os scripts e chamadas de estilo anteriores):

<link rel="stylesheet" type="text/css" href="soundmanager/demo/360-player/360player-visualization.css" />

E também mais um trecho de script; pode mesclar dentro da chamada daquele primeiro ou fazer um novo bloco como esse:

<script type="text/javascript">
threeSixtyPlayer.config.scaleFont = (navigator.userAgent.match(/msie/i)?false:true);
threeSixtyPlayer.config.showHMSTime = true;

// habilita coisas do espectro de áudio
threeSixtyPlayer.config.useWaveformData = true;
threeSixtyPlayer.config.useEQData = true;

// habilita também no Flash se preciso
if (threeSixtyPlayer.config.useWaveformData) {
  soundManager.flash9Options.useWaveformData = true;
}
if (threeSixtyPlayer.config.useEQData) {
  soundManager.flash9Options.useEQData = true;
}
if (threeSixtyPlayer.config.usePeakData) {
  soundManager.flash9Options.usePeakData = true;
}

if (threeSixtyPlayer.config.useWaveformData || threeSixtyPlayer.flash9Options.useEQData || threeSixtyPlayer.flash9Options.usePeakData) {
// mesmo que HTML5 suporte MP3, prefira Flash para que as visualizações possam ser usadas.
  soundManager.preferFlash = true;
}

// favicon - consome mais CPU, mas pode ser usado
if (window.location.href.match(/hifi/i)) {
  threeSixtyPlayer.config.useFavIcon = true;
}

if (window.location.href.match(/html5/i)) {
// para testar IE 9, etc.
  soundManager.useHTML5Audio = true;
}

A marcação do player muda só um pouco, com mais uma classe (ui360-vis) na div, veja a estrutura:

<div class="ui360 ui360-vis">
<a href="url-do-arquivo.mp3" class="norewrite exclude button-exclude inline-exclude">Título da faixa</a>
</div>

Se não deu certo, abra a página de exemplo e cheque se o código ficou parecido.

Com Anotações

Com as anotações dentro de divs, podemos criar mensagens em tempos determinados ao longo da execução da faixa, usando o mesmo modelo anterior.

A estrutura é a seguinte:

<ul class="ui360playlist">
<li>
<div class="ui360 ui360-vis">
 <a href="url-do-audio.mp3">Anotações</a>
 <div class="metadata">
 <div class="duration">4:43</div> <!-- duração total da faixa -->
  <ul>
  <li><p>Introdução</p>
  <span>0:00</span></li> <!-- primeira anotação -->
  <li><p>Anotação 1</p><span>0:07</span></li>
  <li><p>Anotação 2</p><span>0:25</span></li>
  </ul>
 </div>
 </div>
</li>

Cada span no tempo determinado limita uma “área” do progresso do áudio, agora dividido em seções (visíveis no disco interno) que ativam cada anotação. Ou seja, quando a faixa atingir os 7 segundos, surgirá a primeira anotação, etc. Veja o exemplo abaixo pra entender melhor.

Botões

Se esses circulares não agradaram e você precisa de um botão bem mais simples, pode tentar esses. Na head só vai isso aí embaixo, nada daquele monte de coisa mostrado antes:

<link rel="stylesheet" type="text/css" href="soundmanager/demo/mp3-player-button/css/mp3-player-button.css" />
<script type="text/javascript" src="soundmanager/script/soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript" src="soundmanager/demo/mp3-player-button/script/mp3-player-button.js"></script>
<script> soundManager.setup({
// caminho para a pasta contendo o SWF do SM2 
url: 'url/swf/' 
});
</script>

Então use os links para o áudio assim:

<a href="url-do-audio.mp3" class="sm2_button">Título da faixa</a> Título da faixa

Atenção para o fato do texto do link ser substituído pelo botão, então digite o mesmo texto fora do link se quiser que ele continue visível – como na marcação acima.

Se quiser que as músicas da página toquem em sequência (na criação de uma playlist, por exemplo), modifique um trecho do arquivo localizado na pasta mp3-player-button/script/mp3-player-button.js.

Na linha 34, em “playNext: false“, mude para “playNext: true“. A opção logo abaixo, autoPlay, também pode ser alterada para true, assim a música vai tocar assim que for carregada.

Links

Um pouco mais elaborado e bonitinho que os botões anteriores.

Na head:

<link rel="stylesheet" type="text/css" href="soundmanager/demo/play-mp3-links/css/inlineplayer.css" />
<link rel="stylesheet" type="text/css" href="soundmanager/demo/flashblock/flashblock.css" />

<script type="text/javascript" src="soundmanager/script/soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript" src="soundmanager/demo/play-mp3-links/script/inlineplayer.js"></script>

E a marcação para os links de áudio:

<div id="sm2-container">
<!-- SM2 Flash vai aqui se preciso -->
</div>

<ul class="graphic">
<li><a href="url-do-arquivo.mp3">Título da faixa</a></li>
</ul>

Para pausar ou iniciar a execução, clique sobre o texto com o link. Um pouco mais “elegante” que o modelo botão.

MiniPlayer

Esse miniplayer tem barra de progresso, tempo e funciona quase igual ao link (ou seja, play e pause clicando sobre o player, não tem botões específicos pra isso).

Na head:

<link rel="stylesheet" type="text/css" href="soundmanager/demo/page-player/css/page-player.css" />
<!-- soundManager.useFlashBlock: related CSS -->
<link rel="stylesheet" type="text/css" href="soundmanager/demo/flashblock/flashblock.css" />
<script type="text/javascript" src="soundmanager/script/soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript" src="soundmanager/demo/page-player/script/page-player.js"></script>
<script type="text/javascript">
soundManager.setup({ 
url: 'soundmanager/swf/'
});
</script>

E a marcação usando nossos arquivos já conhecidos:

<div id="sm2-container">
<!-- SM2 flash aqui se preciso -->
</div>

<ul class="playlist">
<li><a href="arquivo-de-audio.mp3">Título da Faixa</a></li>
<li><a href="arquivo-de-audio-2.mp3">Título da Faixa 2</a></li>
<li><a href="arquivo-de-midia-3.mp3">Título da Faixa 3</a></li>
</ul>

Com visualizações e anotações

Esse mesmo player aceita alguns efeitos que estão em fase experimental, como visualização de onda. Elas aumentam o consumo de recursos de CPU e não são recomendáveis para rodar em máquinas desatualizadas.

Se mesmo assim quiser experimentar, vamos em frente. Note que o visualizador de ondas é exibido também como favicon no Firefox (causa problemas em versões antigas) e Opera.

Para usar, insira todo o trecho abaixo dentro do head. Veja nos comentários que há algumas coisas pra ajustar:

<link rel="stylesheet" type="text/css" href="soundmanager/demo/page-player/css/page-player.css" />
<!-- soundManager.useFlashBlock: CSS -->
<link rel="stylesheet" type="text/css" href="soundmanager/demo/flashblock/flashblock.css" />
<!-- anotações/sub-faixas/notas e temas alternativos -->
<link rel="stylesheet" type="text/css" href="soundmanager/demo/page-player/css/optional-annotations.css" />
<link rel="stylesheet" type="text/css" href="soundmanager/demo/page-player/css/optional-themes.css" />

<script type="text/javascript" src="soundmanager/script/soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript" src="soundmanager/demo/page-player/script/page-player.js"></script>
<!-- Metadata UI -->
<script src="soundmanager/demo/page-player/script/optional-page-player-metadata.js"></script>
<script>
/* PP_CONFIG deve ser definido antes da ativação de soundManager.onready()/onload(). Alternativamente, edite a config em page-player.js para usar esses valores abaixo como padrão */
soundManager.setup({ 
flashVersion: 9, // versão do Flash 
preferFlash: true, // para visualizar efeitos
useHighPerformance: true, // mantenha Flash na tela, melhora a performance
wmode: 'transparent', // SWF transparente, se possível
url: 'soundmanager/swf/'
}); 
// customizações do player
var PP_CONFIG = { 
autoStart: false, // inicia a execução ao carregar = true 
playNext: true, // tocar a lista até o fim, sem parar a cada faixa = true 
useThrottling: false, // tenta limitar taxa em chamadas potencialmente pesadas (ex: arrastar a posição da barra de execução) = true 
usePeakData: true, // [só Flash 9] mostrar dado de pico (canais esquerdo/direito) - pouco impacto em CPU = true 
useWaveformData: false, // [só Flash 9] mostrar dado de raw waveform PESADO PARA O CPU = true 
useEQData: true, // [só Flash 9] mostrar EQ (espectro de frequência) dado parece fazer o Firefox 3 causar um temporário excesso de uso de disco (acesso, swapping) - pode pesar CPU = true 
}
</script>

E as marcações em HTML: primeiro para um playlist com duas faixas, que vão tocar em sequência:

<ul class="playlist dark">
<li><a href="arquivo-de-audio.mp3">Título da Faixa</a></li>

<li><a href="arquivo-de-audio-2.mp3">Título da Faixa 2</a></li>
</ul>

Notou ali a classe dark, junto com playlist? Para ver outros estilos, é só trocar o dark por bubblegum, gold ou não usar nada para o modelo tradicional azul com cinza.

Para um playlist estilo “brilhante” (com uma luz em cima), use a classe shiny, assim:

<ul class="shiny playlist">

E para concluir, um player com anotações, como visto nos modelos 360° UI. Aqui elas aparecem ao longo da “linha do tempo” da faixa, e também atualizam no texto do player.

<ul class="playlist">
<li>
<a href="arquivo-de-audio.mp3">Título da Faixa</a>
<div class="metadata">
<div class="duration">4:43</div> <!-- tempo total da faixa -->
<ul>
<li><p>Anotação 1</p><span>0:00</span></li> <!-- cena 1 -->
<li><p>Anotação 2</p><span>2:41</span></li> <!-- início da cena 2 -->
<li><p>Anotação 3</p><span>4:00</span></li>
</ul>
</div>
</li>

<li>
<a href="arquivo-de-audio-2.mp3">Título da Faixa 2</a>
<div class="metadata">
<div class="duration">0:47</div>
<ul>
<li><p>Anotação 1</p><span>0:00</span></li>
<li><p>Anotação 2</p><span>0:02</span></li>
<li><p>Anotação 3</p><span>0:05</span></li>
<li><p><i>Anotação 4</i></p><span>0:18</span></li>
<li><p>Anotação 5</p><span>0:31</span></li>
</ul>
</div>
</li>
</ul>

Conclusão

O SoundManager 2 te dá muitas opções de “players simplificados”. Para ajustar tamanhos de fontes, posicionamentos e cores, é só usar um pouco de CSS. Quem tiver conhecimentos mais aprofundados de script vai gostar de explorar os arquivos de ajuda e ver como tem mais coisa pra testar – algumas funções ainda estão em estado de teste, portanto não é recomendável usar em sites prontos.

Veja alguns testes avançados com o SM2 como a Drum Machine, PickUps e o CassetePlayer. Quem sabe você não faz alguma inovação e acrescenta algo ao projeto?

Lembrando que a homepage do SoundManager 2 é essa.

Créditos musicais:

Anúncios Google

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

1 Comment

  1. Excelente artigo, gostaria de saber como fazer no caso com streaming de audio do centova cast

Write A Comment

Pin