Glissando – Animated Audio Player

Glissando is a glass-style audio player with a real-time animated visualizer. Add players anywhere with the Gutenberg block, the Elementor widget, or the [glissando] shortcode.

Features

• Artwork and Compact player presets
• Dark and light themes, six color palettes, custom colors
• Solid visualizer bars with adjustable bar count
• Visualizer tuning: animation speed, frequency range, low cut
• Card styling: hover and glass tint colors, corner radius, shadows, background opacity
• Download button (icon/text styles, second file, download counter)
• Gutenberg block, Elementor widget and [glissando] shortcode
• Scalable

Everything you can tweak

Every setting below has a control in the block sidebar, the Elementor widget and
the shortcode. Settings – Glissando holds the site-wide defaults that new
players start from, and any player can override them.

Audio and text

• Track from the media library or any external URL
• Title and artist, filled in automatically from the media metadata
• Album artwork, square or 16:9, with zoom (1-2.5x) and vertical position

Layout

• Artwork or Compact preset
• Alignment: left, center or right in its column
• Adapts to the column it sits in – the volume slider and the download buttons
  collapse behind a menu button in a narrow column, not only on phones

Colors

• Dark or light theme
• Six visualizer palettes: aurora, sunset, fire, candy, ocean, mono
• Or your own bar gradient, up to three hex colors
• Glass tint color and button hover color

Visualizer

• Bar count, 32 to 160
• Animation speed, from real time to slow drift
• Frequency range and low cut – trim the deep bass off the left edge
• Peak-cap float amount

Card

• Background opacity, 0 to 0.8 – at 0 the card is fully clear glass
• Corner radius, 0 to 40px
• Shadow size and strength

Downloads

• Download button on or off
• Icon, text or both, with your own label
• A second downloadable file (an instrumental, say) with its own label
• Download counter per track, with an optional starting number when you are
  migrating from somewhere that already had counts

Accessibility

• Keyboard-operable play, seek and volume, with visible focus rings
• Honors prefers-reduced-motion

A separately sold Pro version adds further player layouts (Standard, Minimal,
Radial), playlists, the LED and Dots bar styles and a share button.

Source code

None of this plugin’s own code is minified, compiled or obfuscated. Every PHP,
JavaScript and CSS file I wrote is the original human-readable source, and it
uses no third-party JavaScript libraries.

There is one generated value: the GLISSANDO_CSS string near the top of
assets/glissando.js. The player renders inside a Shadow DOM so that themes
cannot break it, and a Shadow DOM cannot see enqueued stylesheets, so the
stylesheet has to be injected as a string.

The readable source for that string is bundled with the plugin, uncompressed, at
assets/glissando.css. GLISSANDO_CSS is that same stylesheet encoded as a
JavaScript string literal – the rules, selectors, comments and formatting are
identical, so the two can be read side by side.

The build step is bundled too, as bake-css.js in the plugin folder. It needs
Node.js and nothing else: no npm install, no dependencies, no bundler. After
editing assets/glissando.css, run this from the plugin folder to regenerate
the string:

node bake-css.js<h3>External services</h3>

This plugin uses Freemius to handle licensing, plugin updates and optional
usage diagnostics.

No data is sent unless you opt in. Freemius is contacted when you accept its
opt-in prompt on activation, or if you later connect a Pro licence or start a
trial. When that happens it sends your site URL, the WordPress and PHP
versions, this plugin’s version, and the email address of the account you
connect with. Declining the prompt leaves the plugin fully functional.

Service provider: Freemius, Inc. — https://freemius.com
Terms of Service: https://freemius.com/terms/
Privacy Policy: https://freemius.com/privacy/