Glissando – Animated Audio Player

Glissando is a glass-style audio player with an animated visualizer that follows the track. Add players anywhere with the Gutenberg block, the Elementor widget or the [glissando] shortcode.
See it running: https://tomglmusic.com/glissando

Features

• Artwork and Compact player presets
• Dark and light themes, six color palettes, your own gradients
• Visualizer bars: count from 32 to 160, animation speed, frequency range, low cut
• Card styling: glass tint, button hover color, corner radius, shadow, background opacity
• Album artwork: square or 16:9, zoom and vertical position
• Download button: icon, text or both, a second file (e.g. instrumental), download counter
• Tracks from the media library or any URL, title and artist filled in automatically
• Fits any column, from full width down to a 300px sidebar
• Site-wide defaults in Settings – Glissando, any player can override them
• Keyboard-operable, respects the “reduce motion” setting
• Themes cannot break it: the player renders in a Shadow DOM

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

External services

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 license 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/