Wordpress plugin page Previous releases Message to author
Download Alex Player v1.41 Play demo
or
Play your media file
This audio player is designed to play local audio or internet radio on your website. It has 6 components: media player, wavesurfer, equalizer, 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.
Digital sound processing based on DC-DSP Filter (Milenko Mitrovic).
Fullscreen visualization based on Geiss (Ryan Geiss).
Thanks to Dual V for the nice audio track ;)
Media player
Source
File
Radio
Mode
Extended
Full
Normal
Minimal
Style
Generic
Translucent
Flags
Spectrum
Color
Position
Default
Fixed
[UIMediaPlayer file="/demo.mp3" color="#c0c0c0" width="600"]
Available options:
  • - url for the local mp3 file
  • - main color of the player
  • - player mode (one of: "extended", "full", "normal", "minimal")
  • - player styling ("generic" or "translucent")
  • - maximum width of the player
  • - visualization type ("0" - waveform, "1" - spectrum)
  • - will display the spectrum on top (for example: "#4fcb1d 50", it represents spectrum color and height)
  • - color of the equalizer
  • - looped playback ("0" - default, "1" - looped)
  • - stop all other players before this player started to play ("0" - no action, "1" - stop all)
  • - used to specify the title of the stream
  • - set the radio station number to play. It can be: "random", "1", "2", "3", ...
  • - set this option to "1" if you want to hide play button
Wavesurfer
Selection
Download as: WAV / MP3
Channels
1
2
Colors
[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
  • - looped playback ("0" - default, "1" - looped)
  • - caching can be used to display waveprint picture without loading the whole audio file into memory, which can be useful for large audio files for example. If you will set this option to "1" than waveprint picture instead of generation will be loaded from the ".surf" file which should be located in the same folder with your audio file. To generate ".surf" file you need to open this link and specify your original audio file: [Generate waveprint for wavesurfer]
  • - enable range selection ("0" - disabled, "1" - enabled). You can obtain selected range by following command:
    document.getElementsByClassName('ui-wavesurfer-selection-values')[0].innerText
  • - will set the color for selection (example: "rgba(0, 0, 255, 0.1)")
  • - will enable ability to download selected area as audio file ("0" - disabled, "1" - enabled)
  • - number of displayed channels ("2" - stereo view, "1" - mono view)
  • - set this option to "1" if you want to hide play button
Equalizer
Color
[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
Playlist
Mode
Simple
Extended
[UIPlaylist mode="extended"]
[UIListItem title="Artist1 - Title1" url="audio1.mp3"]
[UIListItem title="Artist2 - Title2" url="audio2.mp3"]
[UIListItem title="Artist3 - Title3" url="audio3.mp3"]
[/UIPlaylist]
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
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
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
Author: Alex Zhyrytovskyi, 2019 - 2024