Olá, pessoas! Vamos abordar hoje um assunto de dúvida recorrente exposto na comunidade Drupal Brasil: criar uma rádio online, incluindo streaming de servidores externos.

Para isso, nós vamos usar os módulos a seguir, incluindo suas dependências. É de grande importância atentar às observações feitas sobre cada módulo.

• jPlayer
  • “Dev release“, pois nessa é nessa versão que estão incluídas as funcionalidades que precisamos. Uso aqui o release de 26 de fevereiro de 2016. Releases mais recentes também devem funcionar. O jPlayer, por si só, já possibilita a criação de uma rádio online usando arquivos internos como fonte.
• Libraries API
  • Reconhece a biblioteca do jPlayer, que deve ser baixada à parte. Veja o site oficial da biblioteca. Nós estamos usando a versão 2.9.2.
• Link
  • O módulo Link irá permitir a integração de uma fonte externa de streaming, através de um campo do tipo link. No entanto, existe uma restrição para que o jPlayer reconheça corretamente a fonte externa: é necessário que a url válida, a ser usada como fonte, acabe com “.mp3“. Outras terminações não irão funcionar.
• Media
  • “2.x release“. Muito útil no gerenciamento, configurações e consulta de informações relacionadas às mídias. Provê um navegador de arquivos bacana e funciona em conjunto com o módulo File Entity, estendendo as funcionalidades do módulo File, incluído no núcleo do Drupal.
• Views
  • Necessário para exibir o player da rádio completa, independentemente se usarmos os áudios internos ou as referências externas como fonte. Também integra com o jPlayer.
• Views Field
  • Utilidade para extrair dados adicionais dos campos a serem usados nas views. Será usado com o campo provido pelo módulo Link, possibilitando a visualização da rádio completa com fontes externas.

Não vou falar sobre a instalação de módulos e bibliotecas, pois já abordamos esse assunto anteriormente. Você também pode conferir se o jPlayer está instalado corretamente na página “Relatórios de status” do seu site.

Sem mais delongas, bora colocar a mão na massa:

1. Configurações do módulo jPlayer

É possível personalizar a exibição da marcação do tempo no player pelo menu “Configurações > Mídia > jPlayer“. A configuração padrão supre a nossa necessidade.

2. Configurações do módulo Media

É possível personalizar a visualização do navegador de arquivos pelo menu “Configurações > Mídia > Media browser settings“. A configuração padrão supre a nossa necessidade. Caso queira dar acesso de uso do navegador de arquivos aos usuários criadores de conteúdo, é necessário habilitar as permissões por papel pelo menu “Pessoas > Permissões“.

3. Configurações do tipo de arquivo (File Entity)

Para ser mais objetivo neste artigo, vou abordar somente a configuração básica e a necessária para visualização dos arquivos tipo áudio. Mas podemos dizer resumidamente que o módulo File Entity permite a entidade “file” ser tratada como qualquer outra entidade, por exemplo, “user”, “node”, “taxonomy” e assim por diante.

3.1. Configuração básica

É possível redefinir tamanho de upload, extensões de arquivos permitidas, atributos de imagem e comportamento dos passos de upload pelo menu “Configurações > Mídia > Configurações de arquivo“. A configuração padrão geralmente é suficiente, mas vamos retirar o limite de upload e adicionar mais duas extensões que não constam na lista, contemplando todos os arquivos de áudio suportados pelo jPlayer:

• Tamanho máximo para upload: deixar vazio
• Default allowed file extensions: manter as opções existentes e adicionar webma wav

Não se esqueça de clicar em “Salvar configurações” ao final da página. Segue imagem de como ficou:

Note que o tamanho máximo para upload também vai depender das configurações do seu servidor.

3.2. Configuração de visualização dos arquivos de áudio

Apesar das diversas configurações, aqui vamos definir somente o método de renderização dos arquivos. Não é necessário fazer outras configurações para a proposta deste artigo.

Pelo menu “Estrutura > File types > Audio > Manage file display“, temos acesso às opções “Padrão“, “Chamada” e “Pré-visualizar“. Vamos configurar somente “Padrão” e “Chamada“, com as mesmas informações, deixando os dois métodos de visualização iguais. Na opção “Padrão“, informar conforme a seguir:

3.2.1. Enabled displays

Deixar marcado somente “Audio“. Isso irá garantir que, quando o arquivo for acessado diretamente pela URL, exibirá um player compatível com os navegadores mais populares.

3.2.2. Opções de exibição (referente ao Audio)

• Show auduo controls: Marcado
• Preload: Metadata

Não se esqueça de clicar em “Salvar configurações” ao final da página. Feito isso, repita os mesmos passos deste item (3.2., incluindo os sub-itens) na opção “Chamada“. Segue imagem de como ficou:

ATENÇÃO: Não altere a configuração da opção “Pré-visualizar“. Esse método de visualização é responsável pela exibição dos arquivos na criação e edição de conteúdo, incluindo o navegador de arquivos do media.

Muito bem! Agora que fizemos o básico para a brincadeira funcionar, vamos para a parte de inserção do conteúdo a ser usado na exibição.

Configuração do tipo de conteúdo

Pelo menu “Estrutura > Tipos de conteúdo“, escolha qual tipo de conteúdo será usado para inserção dos arquivos e fontes externas de áudio. Para este artigo, criei um tipo de conteúdo somente para manipular essas informações, chamado “Audio“. Mas você pode criar ou usar o tipo de conteúdo que julgar mais apropriado. As informações básicas do tipo de conteúdo não farão diferença. O que importa aqui são os campos.

4. Configuração do campo para arquivo de áudio (fonte interna)

Na página de edição do tipo de conteúdo, na opção “Gerenciar campos“, vamos adicionar um novo campo do tipo “Arquivo” com widget “Navegador de mídia“, que precisa ter, no mínimo, as seguintes configurações:

• Rótulo: Audio (*Ou o nome qualquer)
• Enabled browser plugins: “Upload” e “Library” (*My files também pode ser útil, caso seu site tenha outros usuários criadores/editores de conteúdo)
• Allowed file types: Audio
• Allowed URI schemes: Arquivos públicos (*Não configurei sistema de arquivos privados na minha instalação Drupal, deixando o acesso livre para usuários anônimos. No entanto, é possível determinar que o acesso aos arquivos sejam privados, ou seja, acessível somente aos usuários portadores dos devidos papéis e permissões, e isso pode variar dependendo dos módulos que configuram controle de acesso, instalados no seu sistema)
• Allowed file extensions for uploaded files: mp3, m4a, oga, wav, webma (*Isso contempla todos os tipos de arquivos compatíveis com o jPlayer, para uma rádio de fonte interna)
• Número de valores: Ilimitado (*Para permitir playlists)
• Destino de upload: Arquivos públicos (*Igual a URI schemes)

Observação: no momento da criação do campo, o wizard deve pedir essas informações em outra ordem. Após criar o campo, “edite” o mesmo para confirmar as configurações.

As outras opções são comuns em campos do tipo arquivo. Você pode configurá-las da forma que julgar mais adequada. Não se esqueça de clicar em “Salvar as configurações” ao final da página. Segue imagem de como ficou:

Exibição do tipo de conteúdo

Com o campo criado e configurado, agora vamos definir como ele deve ser exibido. Apesar de ter definido as opções de exibição no item 3.2. deste artigo, precisamos repeti-las no tipo de conteúdo.

5. Configuração de exibição do campo

Na página de edição do tipo de conteúdo, na opção “Gerenciar exibição“, vamos definir o método de renderização para o campo criado, com as mesmas informações para as opções “Padrão” e “Chamada“, seguindo os passos:

• Rótulo: <Oculto>
• Formato: jPlayer – Player

Ao final da linha da tabela, clique na “engrenagem” para editar as opções do formato jPlayer, e informe:

• Kind: Playlist
• Continuous play: Sim
• Tocar automaticamente: Não
• Preferred solution: HTML5
• Preload media: Only metadata
• Initial volume: 100%
• Initially muted: Não
• Repeat: Tudo
• Cor de fundo: 000000

Clique em “Atualizar” ao final do formulário e em seguida em “Salvar” ao final da página. Repita a mesma configuração na opção “Chamada“. Seguem imagens de como ficou:

Agora, sim! Concluímos todos os passos necessários para criar conteúdos com arquivos de áudio mp3, exibidos no player jPlayer, em formato de playlist, com mudança de faixa automática e repetição da playlist desde o início, após tocar a última faixa.

Para testar, crie conteúdos do tipo Audio, ou do tipo que definiu o campo de arquivo, de acordo este artigo, pelo menu “Conteúdo > Adicionar conteúdo“. Faça upload de pelo menos dois arquivos de áudio mp3 no campo que configuramos. Segue amostra em imagens da edição e da visualização do conteúdo:

E por enquanto é isso! No próximo artigo desta série, vou abordar como criar uma view para exibir todos os arquivos de áudio dos conteúdos criados em um player único, concluindo os requisitos mínimos para a criação de uma rádio online usando arquivos internos como fonte.

Se você gostou deste artigo, compartilhe em suas redes sociais. Comente com observações, sugestões, críticas ou o que quiser.

Notas:

• Escolhi o jPlayer pela flexibilidade oferecida na personalização do tema e compatibilidade com os navegadores, principalmente, além da estabilidade, manutenção e evolução do módulo.
• Existem várias outras maneiras de criar uma rádio online com Drupal, incluindo outros módulos, como o Audio Streaming Player, que também usa a biblioteca do jPlayer.
• Esta série de artigos visa a usar o mínimo de programação possível.

***

Artigo publicado originalmente em http://drupaldeelite.com.br/blog/como-criar-uma-radio-online-1