0 Flares 0 Flares ×

What is WavePlayer?

WavePlayer is a fully customizable, responsive HTML5 audio plugin for WordPress. Its interface is built around the forma de onda of the audio file that is playing back.

Here is a list of the main features:

  • responsive interface, with a modern looking style
  • Suporte a HTML5
  • four different sizes that automatically adapt to your page
  • full integration with the WordPress Media Manager
  • Visual Editor in WordPress Post Editor
  • archival of peak files for an instantaneous access to the waveforms

Como instalá-lo?

How to install WavePlayer

for a visual guide CLIQUE AQUI

Passo 1 – In WordPress Plugins seção, Clique sobre o Adicionar novo botão, right beside the Plugins título da página.

Passo 2 – Clique sobre o Carregar o Plugin botão, right beside the Add Plugins título da página.

Passo 3 – Clique sobre o Choose file button in order to select the location of your waveplayer.zip arquivo.

Step 4aBrowse to the location where you downloaded the waveplayer.zip arquivo.

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

Passo 5 – The plugin is now active. You can click on the Configurações link right below its name or go to Configurações-> WavePlayer to configure its options.

Passo 6 – Once WordPress has finished uploading the plugin files, Clique sobre o Ative o Plugin link.

Passo 7 – The plugin is now active. You can click on the Configurações link right below its name or go to Configurações-> WavePlayer to configure its options.

Como usá-lo?

Gerenciador de mídia do WordPress

Starting from Versão 3.9, WordPress makes it possible to create audio playlists directly from the WordPress Media Manager. WavePlayer takes full advantage of this capability introducing a waveplayer shortcode that extends the default playlist shortcode. This new shortcode offers the users a more modern interface for their audio tracks, while keeping the same ease of operation in creating their favorite playlists. Além disso, WavePlayer also overrides the built-in audio shortcode, so that you will automatically find a single-track instance of WavePlayer wherever you have already an audio shortcode in your pages. Even in the backend!

wvpl-wpmediamanager

How to create a new instance of WavePlayer

for a visual guide CLIQUE AQUI

Passo 1 – In order to create a new instance of WavePlayer, simply create or edit the Post or the Page where you want to add the WavePlayer and click on the Adicionar mídia botão, right above the Visual Editor toolbars.

Passo 2 – In the left sidebar, together with all the other elements WordPress allows you to create, you will find a menu to create a new instance of WavePlayer. Clique em Create Waveplayer.

Passo 3 – If you have already uploaded some audio files, you can select it here. Caso contrário, Clique sobre o Upload files Guia, in order to upload new audio files.
(WordPress allows you to attach a featured image to audio tracks as well as to any other post type. When you set the feature image of an audio track, WavePlayer will use it as the thumbnail of that track in the player).

Passo 4 – Upload your audio tracks dragging them to WordPress drop area or Selecting files from your local drives.

Passo 5 – The files uploaded while you are in the process of creating a new Waveplayer instance get automatically selected for the instance’s playlist.

Step 6aWhile the uploading is still processing, you can select more tracks already present in your Media Library

Step 6bWhen the upload is complete and you are happy with you selection, you can finally create a new instance of WavePlayer clicking on the Create a new WavePlayer botão.

Step 7a – Agora, you can edit your instance of WavePlayer, starting with the order of the tracks. In order to change the order, simply drag and drop their thumbnails around.

Step 7b – Na WavePlayer Settings painel, you can change the default settings of the player, that will alter the aspect of this instance in the page.

Step 7cWhen you are happy with your configuration, Clique sobre o Insert WavePlayer button to insert the instance you have just created in your page or post.

Passo 8 – You can immediately preview the instance you have just inserted in the post editor. You can even playback the audio tracks!

WavePlayer allows you to work with a visually complete and fully interactive rendition of the player right in the post editor, thus saving you the time to go back and forth between the post editor and the actual page in the front end.

If you want to make changes to the selected instance, simply click on the button.

Passo 9 – If you want to add more tracks to your playlist, Clique sobre o Add to Waveplayer menu item.

Step 10aWhen altering an instance of WavePlayer that you have previously inserted in your post, you can still add more audio tracks, selecting them from the Media Library or even uploading new files, the exact same way you did when originally creating the player.

Step 10bWhen you are happy with your selection, Clique sobre o Add to WavePlayer button to see your new tracks added to the previous playlist of the player.

Passo 11 – É claro, you can still change the order of the tracks (draggind the files around) or the aspect of the player (altering the WavePlayer settings).

When you are done with you editing, Clique sobre o Update WavePlayer button to make your changes effective.

Passo 12 – Clique sobre o Publicar (for newly created posts or pages) ou o Atualização botão (for already published posts or pages) to finalize your changes.

Now it is time for you to visit the page with your final result!

Shortcode

Although the waveplayer shortcode with all its parameters is created automatically when inserting the Waveplayer through the Adicionar mídia quadro, it is useful to understand its structure that is composed as follows:

[ waveplayer ids = "comma separated IDs of the selected tracks" 
             mp3 = "" 
            size = "lg" | "MD" | "sm" | "xs" 
           style = "luz" | "escuro" 
           shape = "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

idsThis is the only required parameter and it gets automatically populated with the IDs of the tracks selected in the Adicionar mídia quadro. If left blank together with the following parameter mp3, this instance of the Waveplayer will be hidden.

mp3If the ids parameter is left blank, you can provide a URL to an mp3 file through this parameter. If the file is local, Waveplayer will try to access the IDS tags information and show them in the info bar of the player.

sizeDefines the size of the player. Accepted values are: lg, md, sm e xs. If left blank, the player will be displayed at the default size configuração, according to the corresponding option of Configurações –> Waveplayer.

styleCan be set to light ou dark and defines the coloring of the area where the information of the current track are displayed. Além disso, Waveplayer is fully customizable through the Custom CSS option of Configurações –> Waveplayer. If left blank, the player will use the default style configuração, according to the corresponding option of Configurações –> Waveplayer.

shapeCan be set to square, circle ou rounded and defines the shape of the thumbnail where the playback controls are located. If left blank, the player will use the default shape configuração, according to the corresponding option of Configurações –> Waveplayer.

autoplayIf set to true, the player will start to playback the track as soon as the page completes loading. If set to false, the user will have to start the playback manually. If left blank, the player will use the default autoplay configuração, according to the corresponding option of Configurações –> Waveplayer.

repeat_allIf set to true, the player will keep playing back the tracks continuously, restarting from the first track when the last one has ended. If set to false, the playback will stop after the last track has ended. If left blank, the player will use the default repeat_all configuração, according to the corresponding option of Configurações –> Waveplayer.

shuffleIf set to true, the player will shuffle the tracks every time the visitor reloads the page. If set to false, the order of the tracks will be the one provided with the ids parâmetro. If left blank, the player will use the default shuffle configuração, according to the corresponding option of Configurações –> Waveplayer.

wave_color, wave_color_2Defines the starting and ending color of the vertical gradient filling the waveform. If left blank, the player will use the default wave_color e wave_color_2 Configurações, according to the corresponding option of Configurações –> Waveplayer. For a better understanding of the waveform coloring scheme, please refer to the Waveform Options section do Configurações.

progress_color, progress_color_2Defines the starting and ending color of the vertical gradient filling the performed portion of the waveform. If left blank, the player will use the default progress_color e progress_color_2 Configurações, according to the corresponding option of Configurações –> Waveplayer. For a better understanding of the waveform coloring scheme, please refer to the Waveform Options section do Configurações.

hover_opacityDefines the opacity of the wave overlay when the user moves the pointer over the wave. Set this parameter to 0 to have a regular continuous waveform. If left blank, the player will use the default hover_opacity configuração, according to the corresponding option of Configurações –> Waveplayer.

cursor_color, cursor_color_2Defines the starting and ending colors of a vertical gradient for the cursor scrolling over the waveform. If left blank, the player will use the default cursor_color e cursor_color_2 Configurações, according to the corresponding option of Configurações –> Waveplayer. For a better understanding of the waveform coloring scheme, please refer to the Waveform Options section do Configurações.

cursor_widthDefines the width of the bars displaying the waveform. Set this parameter to 0 to have a regular continuous waveform. If left blank, the player will use the default cursor_width configuração, according to the corresponding option of Configurações –> Waveplayer.

wave_modeDefines the visualization mode of the wave. If set to 0 (‘Continuousin the settings page), the waveform will be displayed as a regular continuous waveform. Any other setting from 1 Para 10 represents the width a the bars used to display the waveform in a histogram fashion. If left blank, the player will use the default wave_mode configuração, according to the corresponding option of Configurações –> Waveplayer.

gap_width – Se wave_mode is set to any value other than 0 (‘Continuous’), this parameter defines the width of the gap between the bars representing the waveform. If left blank, the player will use the default gap_width configuração, according to the corresponding option of Configurações –> Waveplayer.

wave_compressionDefines the compression of the wave. This option does not affect the file of the audio, but only the way its waveform gets displayed. A lower level of compression shows a more evident difference between low intensity and high intensity in the waveform. Por outro lado, a higher level of compression flattens those differences, showing a more uniform wave. If left blank, the player will use the default wave_compression configuração, according to the corresponding option of Configurações –> Waveplayer.

wave_asymmetryDefines the ratio between the height of the top half of the wave and the height of the bottom part of the waves. If left blank, the player will use the default wave_asymmetry configuração, according to the corresponding option of Configurações –> Waveplayer.

Configurações

WavePlayer settingslocated at the Configurações –> WavePlayer page of the WordPress Admin areadefine how to display a shortcode with no parameters provided other than the IDs of the audio tracks you want to included in that particular instance of the player, like the following one:

Please note that changing any of these settings will affect the way each instance with QUALQUER missing parameter will be displayed on your website.

Default player options

for a visual guide CLIQUE AQUI

In the first panel of the WavePlayer Settings you can define the default options for the size, style, shape, autoplay, repeat_all e shuffle parâmetros. Whenever you insert an instance of the Waveplayer without providing any of these parameters, the instance will be displayed according to these settings.

Default waveform options and color scheme

for a visual guide CLIQUE AQUI

In the second panel of the WavePlayer Settings you can set all the default values that define how the waveform is going to be rendered. Whenever you insert an instance of the Waveplayer without providing any of these parameters in the shortcode, the instance will be displayed according to these settings.

Through these options you can have the waveform perfectly matching your current WordPress theme and thanks to the realtime preview, you can see the result of your changes without even the need to save the settings.

Além disso, all these settings can be added as parameters to each Waveplayer shortcode, customizing each instance of the player, regardless of these default settings.

HTML & CSS Customization

for a visual guide CLIQUE AQUI

In the last panel you will find two different textareas.

The first one, Info bar template, allows you to customize the information shown in the info bar when a track starts playing back. You can use pretty much every ID3 tag you know are saved in the audio file you uploaded. Simply write you HTML template including each tag surrounded by a%” personagem. Por exemplo, if you want to show the title of the song followed by the artist name, you can write the following HTML code in the textarea:

%title% by %artist%

The second textarea, Custom CSS, allows you to add your own CSS rules to the default stylesheet that comes with the plugin. You can either customize the default CSS rules or create your own set of rules to be added in the info bar template.

Manutenção

for a visual guide CLIQUE AQUI

A peak file is saved by WavePlayer in thepeakssubfolder of the plugin, whenever an audio track is loaded for the first time. This allows WavePlayer to render the waveform of each audio file much faster the following times.

If you delete an audio track that was previously used in WavePlayer, the peak file remains unused forever in the peak subfolder of the plugin. Although peak files are very small in size (usually around 30 kB), it can be a waste of your hosting space if you happen to upload and delete audio attachments regularly. It is recommended to delete orphan peak files clicking on the Delete orphan peak files button every time you delete a massive amount of audio attachments from your website.

Se, for any reason, you want to make sure WavePlayer regenerates all the peak files, you have to delete them using the Delete all peak files botão.

Créditos

WavePlayer makes use of the following projects:

wavesurfer.jsThe waveform design capability you find in WavePlayer is built around waveform.js, por katspaugh, optimized to a more efficient management of the canvas capabilities and extended to be integrated as a WordPress plugin. You can learn more about that project at the Wavesurfer.js Official Page or at the Wavesurfer.js GitHub Ppage.

Wavesurfer.js is licensed under a Creative Commons Atribuição 3.0 Unported License.

Fonte-incrível – Buttons and icons featured in WavePlayer are provided by Fonte fantástico, a CSS toolkit based on an iconic font. The font is released under a SIL OFL 1.1 Licença.

The CSS code is released under a 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 *