0 Flares 0 Flares ×



O que é WavePlayer?

WavePlayer é um totalmente personalizável, responsivo HTML5 áudio plugin para WordPress. Sua interface é construída em torno do forma de onda do arquivo de áudio que está jogando de volta.

Aqui está uma lista das principais características:

  • interface responsiva, com um estilo moderno à procura
  • Suporte a HTML5
  • quatro tamanhos diferentes que automaticamente se adaptam à sua página
  • integração total com o WordPress Media Manager
  • Editor visual no Editor de Post do WordPress
  • arquivamento de arquivos de pico para um acesso instantâneo para as formas de onda

Como instalá-lo?

Como instalar WavePlayer

para um guia visual CLIQUE AQUI

Passo 1 – Em WordPress Plugins seção, Clique sobre o Adicionar novo botão, bem ao lado do Plugins título da página.

Passo 2 – Clique sobre o Carregar o Plugin botão, bem ao lado do Adicionar Plugins título da página.

Passo 3 – Clique sobre o Escolha ' arquivo ' botão para selecionar o local de sua Waveplayer.zip arquivo.

Passo 4a – Navegue até o local onde você baixou o Waveplayer.zip arquivo.

Passo 4b – Clique sobre o Aberto botão.

Passo 5 – O plugin está ativo. Você pode clicar sobre o Configurações link logo abaixo seu nome, ou ir para Configurações-> WavePlayer para configurar suas opções.

Passo 6 – Uma vez que terminou de carregar os arquivos do plugin WordPress, Clique sobre o Ative o Plugin link.

Passo 7 – O plugin está ativo. Você pode clicar sobre o Configurações link logo abaixo seu nome, ou ir para Configurações-> WavePlayer para configurar suas opções.

Como usá-lo?

Gerenciador de mídia do WordPress

A partir de Versão 3.9, Torna possível criar listas de reprodução de áudio diretamente do gerente de mídia do WordPress WordPress. WavePlayer Tira o máximo partido de introduzir esta capacidade um waveplayer shortcode que estende o padrão playlist shortcode. Este novo shortcode oferece aos usuários uma interface mais moderna para suas faixas de áudio, mantendo a mesma facilidade de operação em criar suas listas de favoritas. Além disso, WavePlayer também substitui o built-in audio shortcode, para que você automaticamente irá encontrar uma instância single-track do WavePlayer onde quer que você já tem um audio shortcode em suas páginas. Mesmo no backend!

wvpl-wpmediamanager

Como criar uma nova instância de WavePlayer

para um guia visual CLIQUE AQUI

Passo 1 – A fim de criar uma nova instância de WavePlayer, simplesmente criar ou editar o Post ou na página onde você deseja adicionar o WavePlayer e clique sobre o Adicionar mídia botão, logo acima as barras de ferramentas do Editor Visual.

Passo 2 – Na barra lateral esquerda, juntamente com todos os outros elementos o WordPress permite que você crie, Você vai encontrar um menu para criar uma nova instância de WavePlayer. Clique em Criar Waveplayer.

Passo 3 – Se você já enviou alguns arquivos de áudio, Você pode selecioná-lo aqui. Caso contrário, Clique sobre o Upload de arquivos Guia, para fazer upload de novos arquivos de áudio.
(WordPress permite que você anexar uma imagem indicada para faixas de áudio, bem como para qualquer outro tipo de post. Quando você definir a imagem característica de uma faixa de áudio, WavePlayer irá usá-lo como a miniatura da pista no player).

Passo 4 – Fazer upload de suas faixas de áudio arrastando-os para a área de queda de WordPress ou Seleção de arquivos de suas unidades locais.

Passo 5 – Os arquivos carregados enquanto você está no processo de criar uma nova instância de Waveplayer ser selecionados automaticamente para a lista da instância.

6a etapa – Enquanto o upload ainda está processando., Você pode selecionar mais rastos já presentes na sua biblioteca de mídia

Etapa 6b – Quando a instalação estiver completa, e você está feliz com você, seleção, Você pode finalmente criar uma nova instância de WavePlayer clicando sobre o Criar um novo WavePlayer botão.

7a etapa – Agora, Você pode editar sua instância do WavePlayer, começando com a ordem das faixas. Para alterar a ordem, simplesmente arraste e solte suas miniaturas em torno.

Passo 7b – Na WavePlayer configurações painel, Você pode alterar as configurações padrão do jogador, Isso irá alterar o aspecto desta instância na página.

Passo 7c – Quando você está feliz com a sua configuração, Clique sobre o Inserir WavePlayer botão para inserir a instância que você acabou de criar em sua página ou post.

Passo 8 – Você pode visualizar imediatamente a instância que você só tenha inserido no editor de post. Você pode mesmo reproduzir as faixas de áudio!

WavePlayer permite que você trabalhe com uma interpretação visualmente completa e totalmente interativa, o direito do jogador no editor de post, poupando-lhe tempo para ir e voltar entre o editor do post e a página real no front end.

Se você quiser fazer alterações à instância selecionada, Basta clicar no botão.

Passo 9 – Se você deseja adicionar mais músicas à lista de reprodução, Clique sobre o Adicionar ao Waveplayer item de menu.

Passo 10a – Quando alterar uma instância do WavePlayer que você inseriu anteriormente no seu post, Você ainda pode adicionar mais faixas de áudio, selecionando-as da biblioteca de mídia ou mesmo upload de novos arquivos, da mesma maneira que você fez ao criar originalmente o jogador.

Passo 10b – Quando você está feliz com sua seleção, Clique sobre o Adicionar ao WavePlayer botão para ver suas novas faixas adicionadas à lista anterior do jogador.

Passo 11 – É claro, Você ainda pode alterar a ordem das faixas (draggind os arquivos ao redor) ou o aspecto do jogador (alterando as configurações de WavePlayer).

Quando você terminar com você edição, Clique sobre o WavePlayer atualização botão para fazer suas alterações eficaz.

Passo 12 – Clique sobre o Publicar (para recém-criado posts ou páginas) ou o Atualização botão (para já publicados posts ou páginas) para finalizar as alterações.

Agora é hora de você visitar a página com o seu resultado final!

Shortcode

Embora o waveplayer shortcode com todos os seus parâmetros é criado automaticamente quando inserir o Waveplayer através do Adicionar mídia quadro, é útil entender a sua estrutura que é composta da seguinte forma:

[ Waveplayer identificações = "separado por vírgula IDs das faixas selecionadas" 
             mp3 = "" 
            tamanho = "LG" | "MD" | "SM" | "xs" 
           estilo = "luz" | "escuro" 
           forma = "Praça" | "círculo" | "arredondado" 
        AutoPlay = "true" | "falso" 
      repeat_all = "true" | "falso" 
         shuffle = "true" | "falso" 
      wave_color = "#DDD" 
    wave_color_2 = "#666" 
  progress_color = "#59f" 
progress_color_2 = "#05um" 
   hover_opacity = "0.4" 
    cursor_color = "#EE2" 
  cursor_color_2 = "#d93" 
    cursor_width = "2" 
       wave_mode = "4" 
       gap_width = "1" 
wave_compression = "2" 
  wave_asymmetry = "2" ]
Parâmetros

ids – Este é o único parâmetro obrigatório e ele obtém automaticamente preenchido com os IDs das faixas selecionadas na Adicionar mídia quadro. Se deixado em branco, juntamente com o parâmetro a seguir mp3, esta instância do Waveplayer ficará oculta.

mp3 – Se o ids parâmetro for deixado em branco, Você pode fornecer uma URL para um arquivo de mp3 através deste parâmetro. Se o arquivo for local, Waveplayer tentará acessar as informações de tags de IDS e mostrá-los na barra de informação do jogador.

size – Define o tamanho do player. Os valores aceitos são: lg, md, sm e xs. Se deixado em branco, o jogador será exibido no padrão size configuração, de acordo com a opção correspondente de Configurações –> Waveplayer.

style – Pode ser definido como light ou dark e define a coloração da área onde a informação da faixa atual são exibidos. Além disso, Waveplayer é totalmente personalizável através da Custom CSS opção de Configurações –> Waveplayer. Se deixado em branco, o jogador usará o padrão style configuração, de acordo com a opção correspondente de Configurações –> Waveplayer.

shape – Pode ser definido como square, circle ou rounded e define a forma da miniatura onde se situam os controles de reprodução. Se deixado em branco, o jogador usará o padrão shape configuração, de acordo com a opção correspondente de Configurações –> Waveplayer.

autoplay – Se definido como true, o jogador vai começar a reprodução da faixa assim que a página de carregamento é concluída. Se definido como false, o usuário terá que iniciar a reprodução manualmente. Se deixado em branco, o jogador usará o padrão autoplay configuração, de acordo com a opção correspondente de Configurações –> Waveplayer.

repeat_all – Se definido como true, o jogador vai continuar volta as faixas continuamente, reiniciar desde a primeira faixa, quando terminou o ultimo. Se definido como false, a reprodução será interrompida após o término da última faixa. Se deixado em branco, o jogador usará o padrão repeat_all configuração, de acordo com a opção correspondente de Configurações –> Waveplayer.

shuffle – Se definido como true, o jogador irá embaralhar as faixas cada vez que o visitante recarrega a página. Se definido como false, a ordem das faixas será o fornecido com o ids parâmetro. Se deixado em branco, o jogador usará o padrão shuffle configuração, de acordo com a opção correspondente de Configurações –> Waveplayer.

wave_color, wave_color_2 – Define a cor inicial e final do gradiente vertical a forma de onda de enchimento. Se deixado em branco, o jogador usará o padrão wave_color e wave_color_2 Configurações, de acordo com a opção correspondente de Configurações –> Waveplayer. Para uma melhor compreensão da forma de onda para colorir o regime, por favor, consulte o Seção de opções de forma de onda do Configurações.

progress_color, progress_color_2 – Define o inicial e final a cor do gradiente vertical a parcela realizada da forma de onda de enchimento. Se deixado em branco, o jogador usará o padrão progress_color e progress_color_2 Configurações, de acordo com a opção correspondente de Configurações –> Waveplayer. Para uma melhor compreensão da forma de onda para colorir o regime, por favor, consulte o Seção de opções de forma de onda do Configurações.

hover_opacity – Define a opacidade da sobreposição onda quando o usuário move o ponteiro sobre a onda. Defina este parâmetro como 0 para ter uma forma de onda contínua regular. Se deixado em branco, o jogador usará o padrão hover_opacity configuração, de acordo com a opção correspondente de Configurações –> Waveplayer.

cursor_color, cursor_color_2 – Define as cores inicial e finais de um gradiente vertical para o cursor de rolagem sobre a forma de onda. Se deixado em branco, o jogador usará o padrão cursor_color e cursor_color_2 Configurações, de acordo com a opção correspondente de Configurações –> Waveplayer. Para uma melhor compreensão da forma de onda para colorir o regime, por favor, consulte o Seção de opções de forma de onda do Configurações.

cursor_width – Define a largura das barras exibindo a forma de onda. Defina este parâmetro como 0 para ter uma forma de onda contínua regular. Se deixado em branco, o jogador usará o padrão cursor_width configuração, de acordo com a opção correspondente de Configurações –> Waveplayer.

wave_mode – Define o modo de visualização da onda. Se definido como 0 (' Contínua’ na página de configurações), a forma de onda será exibida como uma forma de onda contínua regular. Qualquer outra configuração de 1 Para 10 representa a largura dos bares usados para exibir a forma de onda em forma de histograma. Se deixado em branco, o jogador usará o padrão wave_mode configuração, de acordo com a opção correspondente de Configurações –> Waveplayer.

gap_width – Se wave_mode é definido como qualquer valor diferente de 0 ('Contínuo'), Este parâmetro define a largura do espaço entre as barras que representam a forma de onda. Se deixado em branco, o jogador usará o padrão gap_width configuração, de acordo com a opção correspondente de Configurações –> Waveplayer.

wave_compression – Define a compressão da onda. Esta opção não afeta o arquivo de áudio, Mas somente a maneira de como sua forma de onda fica exibida. Um nível de compressão inferior mostra uma diferença mais evidente entre a baixa intensidade e alta intensidade em forma de onda. Por outro lado, um nível mais elevado de compressão nivela as diferenças, mostrando uma onda mais uniforme. Se deixado em branco, o jogador usará o padrão wave_compression configuração, de acordo com a opção correspondente de Configurações –> Waveplayer.

wave_asymmetry – Define a relação entre a altura da metade superior da onda e a altura da parte inferior das ondas. Se deixado em branco, o jogador usará o padrão wave_asymmetry configuração, de acordo com a opção correspondente de Configurações –> Waveplayer.

Configurações

WavePlayer configurações – localizado no Configurações –> WavePlayer página da área de WordPress Admin – definir como exibir um shortcode sem parâmetros, desde que não sejam as identificações das faixas de áudio deseja incluídas nessa instância particular do jogador, como a seguir:

Por favor, note que alterar qualquer uma dessas configurações afetarão a maneira como cada instância com QUALQUER faltando parâmetro será exibido em seu site.

Opções de jogador padrão

para um guia visual CLIQUE AQUI

No primeiro painel das configurações WavePlayer você pode definir as opções padrão para o size, style, shape, autoplay, repeat_all e shuffle parâmetros. Sempre que você inserir uma instância do Waveplayer sem fornecer qualquer um desses parâmetros, a instância será exibida de acordo com essas configurações.

Esquema de cor e opções de forma de onda padrão

para um guia visual CLIQUE AQUI

No segundo painel do WavePlayer configurações, você pode definir todos os valores padrão que definem como a forma de onda vai ser processado. Sempre que você inserir uma instância do Waveplayer sem fornecer qualquer um desses parâmetros no shortcode, a instância será exibida de acordo com essas configurações.

Através destas opções, você pode ter a forma de onda perfeitamente em harmonia com seu tema de WordPress atual e obrigado para a visualização em tempo real, Você pode ver o resultado de suas alterações sem sequer a necessidade de salvar as configurações.

Além disso, todas essas configurações podem ser adicionadas como parâmetros para cada shortcode Waveplayer, Personalizando cada instância do jogador, independentemente dessas configurações padrão.

HTML & Personalização de CSS

para um guia visual CLIQUE AQUI

O último painel você encontrará dois diferentes textareas.

O primeiro deles, Modelo de barra de informação, permite-lhe personalizar as informações mostradas no info barra quando uma faixa começa a reproduzir. Você pode usar praticamente todos os tag ID3, que sabe que são salvas no arquivo de áudio que você carregou. Simplesmente você escrever modelo HTML incluindo cada marca rodeada por um “%” personagem. Por exemplo, Se você quer mostrar o título da canção seguido do nome do artista, Você pode escrever o seguinte código HTML na área de texto:

%title% by %artist%

A segunda textarea, Custom CSS, permite que você adicione suas próprias regras CSS para a folha de estilo padrão que vem com o plugin. Você pode personalizar as regras CSS padrão ou criar seu próprio conjunto de regras a ser adicionado no modelo de barra de informação.

Manutenção

para um guia visual CLIQUE AQUI

Um arquivo de pico é salvo pelo WavePlayer no ‘picos‘ subpasta do plugin, sempre que uma faixa de áudio é carregada pela primeira vez. Isto permite WavePlayer processar a forma de onda de cada arquivo de áudio muito mais rápido os seguintes horários.

Se você excluir uma faixa de áudio que foi usada anteriormente em WavePlayer, o arquivo de pico permanece para sempre não utilizado na subpasta pico do plugin. Embora os arquivos de pico são muito pequenos em tamanho (geralmente ao redor 30 kB), pode ser um desperdício de seu espaço de hospedagem se acontecer de você fazer o upload e excluir anexos áudio regularmente. É recomendável excluir arquivos órfãos pico clicando sobre o Excluir arquivos órfãos pico botão sempre que você excluir uma enorme quantidade de acessórios de áudio do seu site.

Se, por qualquer razão, Você quer certificar-se de que Waveplayer regenera todos os arquivos do pico, Você tem que eliminá-los usando o Excluir todos os arquivos de pico botão.

Créditos

WavePlayer faz uso dos seguintes projetos:

wavesurfer.js – A capacidade do projeto de forma de onda em que você encontrar WavePlayer é construído em torno de waveform.js, por katspaugh, otimizado para uma gestão mais eficiente dos recursos de lona e estendido para ser integrado como um plugin para WordPress. Você pode aprender mais sobre esse projeto para o Página oficial do wavesurfer.js ou para o Wavesurfer.js GitHub Ppage.

Wavesurfer.js está licenciado sob uma Creative Commons Atribuição 3.0 Unported License.

Fonte-incrível – Botões e ícones apresentados no WavePlayer são fornecidos pelo Fonte fantástico, um conjunto de ferramentas CSS baseado em uma fonte icônico. A fonte é liberada sob uma SIL OFL 1.1 Licença.

O código CSS é liberado sob uma Licença MIT.

Changelog

v1.0.18
* Primeiro lançamento

0 Flares Twitter 0 Facebook 0 Google 0 PIN-compartilhar 0 LinkedIn 0 Email -- 0 Flares ×

Deixar uma resposta

Seu endereço de e-mail não será publicado. Campos obrigatórios são marcados *