Get PRO
for $20
Wordpress plugin page Message to author
Download Alex Player v1.14 Play demo
or
Play your audio file
This audio player is designed to play and visualize the local audio on your Wordpress website. It has 5 components: media player, wavesurfer, waveform visualization, circular spectrum and play button. To install it on your Wordpress you need to download and install this plugin inside Wordpress and activate it. After that in any article content you can insert shortcode of this player. You can find the examples of shortcodes below. If you want financially help to develop this project you can contact Alex.
Media player
Pro
Full
Normal
Minimal
[UIMediaPlayer file="/demo.mp3" color="#c0c0c0" width="600"]
Available options:
  • - url for the local mp3 file
  • - main color of the player
  • - maximum width of the player
  • - visualization type ("0" - waveform, "1" - spectrum)
  • - color of the equalizer (pro only)
  • - you can set this option to "1" to hide the promotion link
Wavesurfer
[UIWaveSurfer file="/demo.mp3" color="#4fcb1d" color2="#8b8b8b"]
Available options:
  • - url for the local mp3 file
  • - color for active part of time line
  • - color for inactive part of time line
  • - if you will set this option to "1" than visualization loading can be speed up by cached file if you locate it near your mp3 [Generate cached file]
  • - you can set this option to "1" to hide the promotion link
Equalizer (PRO only)
[UIEqualizer file="/demo.mp3" color="#4fcb1d"]
Available options:
  • - set here file name same as on the main player to connect equalizer to it
  • - color of the equalizer
Waveform visualization
[UIWaveform color="#727272" opacity="0.8" height="64"]
[UIWaveform color="#727272" opacity="0.5" height="64" owner="body" owner_top="50"]
Available options:
  • - color of the visualization line
  • - opacity of the visualization line
  • - height of the visualization area
  • - set this option if you want to insert visualization inside any web page element by its CSS selector (or jQuery selector)
  • - this sets to offset of the visualization inside owner element
  • - by default waveform displays visualization for all the media players, if you want to connect it to specific media player than you need to specify the same file name that this media player has
  • - you can set this option to "1" to hide the promotion link
Circular spectrum + Play button
[UIPlayButton file="/demo.mp3" id="my-play-button" size="48 64" color="#b0b0b0 #727272 400"]
[UICircularSpectrum owner="#my-play-button" size="64 180" bars="257 1.5 #e0e0e0 2.0 4.0"]
[UICircularSpectrum owner="#see-logo-above" size="115 200" bars="100 0.7 #a8a8a8 0.5 4.0" peaks="#515151 0.14" opacity="0.5"]
Circular spectrum options:
  • - the visualization need to be connected to some element by its CSS selector (or jQuery selector) for example (for example: ".some-class-name" or "#some-id-name")
  • - by default waveform displays visualization for all the media players, if you want to connect it to specific media player than you need to specify the same file name that this media player has
  • - has two numbers (for example "115 200"), these numbers representing minimum and maximum visualization diameter
  • - information about bars (for example: "100 0.7 #a8a8a8 0.5 4.0"), there 5 values which representing: bar count, bar width, color, decrement and scale. Bar count can be any number from 2 to 1000. Bar with can have the value from 0.0 to 1.0 (for example: 0.3 - thin bar, 1.0 - thick bar). Bar color can be any web color. Decrement used to decrease the spectrum every time (for example: 1.0 - normal decreasing speed, 2.0 - high decreasing speed, 0.1 - low decreasing speed). The scale factor need to adjust the height of the spectrum
  • - information about peaks (for example: #515151 0.14), there 2 variables: peak color and decrement. Peak color can be any web color. Decrement used to decrease peak value every time (for example: 0.15 - normal decreasing speed, 0.05 - slow decreasing speed, 2.0 - high decreasing speed)
  • - opacity of the visualization
  • - you can set this option to "1" to hide the promotion link
Play button options:
  • - file name to which this button need to be connected
  • - has two numbers (for example "48 64"), first one is the size of the icon, and second one is the size of the clickable area
  • - information about play button color (for example: "#b0b0b0 #727272 400"), there 3 values which representing: color, hover color and color change duration. Color and hover color are web colors. Color change duration written in milliseconds
  • - individual name for this button, using this name it can be connected with circular spectrum
  • - you can set this option to "1" to hide the promotion link
Make a donation