Title: Glissando – Animated Audio Player
Author: tomsgl
Published: <strong>2026 年 9 月 9 日</strong>
Last modified: 2026 年 9 月 9 日

---

搜尋外掛

![](https://ps.w.org/glissando/assets/banner-772x250.png?rev=3688632)

![](https://ps.w.org/glissando/assets/icon-256x256.png?rev=3688632)

# Glissando – Animated Audio Player

 由 [tomsgl](https://profiles.wordpress.org/tomsgl/) 開發

[下載](https://downloads.wordpress.org/plugin/glissando.1.2.8.zip)

 * [詳細資料](https://tw.wordpress.org/plugins/glissando/#description)
 * [使用者評論](https://tw.wordpress.org/plugins/glissando/#reviews)
 *  [安裝方式](https://tw.wordpress.org/plugins/glissando/#installation)
 * [開發資訊](https://tw.wordpress.org/plugins/glissando/#developers)

 [技術支援](https://wordpress.org/support/plugin/glissando/)

## 外掛說明

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 – scalable

_Colors_

 * Dark or light theme
 * Six visualizer palettes: aurora, sunset, fire, candy, ocean, mono
 * Multi-color gradients of your own
 * Glass tint color and button hover color

_Visualizer_

 * Bar count from 32 to 160
 * Animation speed, from real time to slow drift
 * Frequency range and low cut – trim the deep bass off the left edge

_Card customization settings_

 * Background opacity
 * Corner radius
 * Shadow size and strength

_Downloads_

 * Download button on or off
 * Icon, text or both, with your own label
 * A second downloadable file (e.g. instrumental) with its own label
 * Download counter per track

_Accessibility_

 * Keyboard-operable play, seek and volume, with visible focus rings
 * Respects the system “reduce motion” accessibility setting

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/

## 螢幕擷圖

[⌊Artwork preset, dark theme, mid-playback - the same player at four column widths.⌉⌊
Artwork preset, dark theme, mid-playback - the same player at four column widths
.⌉[

Artwork preset, dark theme, mid-playback – the same player at four column widths.

[⌊Compact preset - from full width down to a narrow sidebar, controls collapsing
as the column shrinks.⌉⌊Compact preset - from full width down to a narrow sidebar,
controls collapsing as the column shrinks.⌉[

Compact preset – from full width down to a narrow sidebar, controls collapsing as
the column shrinks.

[⌊Dark and light theme, same track.⌉⌊Dark and light theme, same track.⌉[

Dark and light theme, same track.

[⌊Adjustable bar count and per-player colours.⌉⌊Adjustable bar count and per-player
colours.⌉[

Adjustable bar count and per-player colours.

[⌊Elementor widget controls - the same settings exist in the block sidebar and the
shortcode.⌉⌊Elementor widget controls - the same settings exist in the block sidebar
and the shortcode.⌉[

Elementor widget controls – the same settings exist in the block sidebar and the
shortcode.

[⌊What the separately sold Pro version adds - not included in this free plugin.⌉⌊
What the separately sold Pro version adds - not included in this free plugin.⌉[

What the separately sold Pro version adds – not included in this free plugin.

## 適用於區塊編輯器

這個外掛提供 1 個可供區塊編輯器使用的區塊。

 *   Player

## 安裝方式

 1. Upload the plugin ZIP via Plugins  Add New  Upload, or unzip into `wp-content/plugins/`.
 2. Activate the plugin.
 3. Add the Glissando Player block (or Elementor widget), or use `[glissando id="123"]`/`[
    glissando src="https://example.com/track.mp3"]`.

## 常見問題集

### Does it work with any theme?

Yes. The player renders in a Shadow DOM, so theme styles cannot break it.

### Do I have to set every option on every player?

No. Settings – Glissando holds the defaults for the whole site; a player only
 carries
the settings you change on it.

### Does it fit in a narrow sidebar column?

Yes. The player measures the column it is in, not the browser window, so it
 lays
out the same in a 300px sidebar on a desktop as it does on a phone.

### Can visitors download the track?

If you turn the download button on. You can label it, show it as an icon, text
 
or both, offer a second file alongside it, and show how many times each track has
been downloaded.

## 使用者評論

這個外掛目前沒有任何使用者評論。

## 參與者及開發者

以下人員參與了開源軟體〈Glissando – Animated Audio Player〉的開發相關工作。

參與者

 *   [ tomsgl ](https://profiles.wordpress.org/tomsgl/)
 *   [ Freemius ](https://profiles.wordpress.org/freemius/)

[將〈Glissando – Animated Audio Player〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/glissando)

### 對開發相關資訊感興趣？

任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/glissando/)、查看
[SVN 存放庫](https://plugins.svn.wordpress.org/glissando/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/glissando/?limit=100&mode=stop_on_copy&format=rss)
訂閱[開發記錄](https://plugins.trac.wordpress.org/log/glissando/)。

## 變更記錄

#### 1.2.8

 * The plugin icon now shows on the Plugins and Dashboard – Updates screens instead
   of a placeholder.

#### 1.2.7

 * The actions button no longer appears when both downloads and share are off — 
   it used to open an empty bubble.

#### 1.2.6

 * Narrow columns: the volume slider now hides by column width, not viewport width,
   so the actions button stops wrapping to a second line in a narrow Elementor column.
 * Radial preset: download/share collapse behind the actions button like every other
   preset, so nothing spills outside the card at small sizes.
 * Radial preset: artwork vertical position slider now applies (and shows up in 
   the Elementor widget).

#### 1.2.5

 * First release on WordPress.org.

## 中繼資料

 *  版本 **1.2.8**
 *  最後更新 **3 週前**
 *  啟用安裝數 **少於 10 次**
 *  WordPress 版本需求 ** 6.0 或更新版本 **
 *  已測試相容的 WordPress 版本 **7.1.2**
 *  PHP 版本需求 ** 7.4 或更新版本 **
 *  語言
 * [English (US)](https://wordpress.org/plugins/glissando/)
 * 標籤:
 * [audio](https://tw.wordpress.org/plugins/tags/audio/)[audio player](https://tw.wordpress.org/plugins/tags/audio-player/)
   [mp3](https://tw.wordpress.org/plugins/tags/mp3/)[music player](https://tw.wordpress.org/plugins/tags/music-player/)
   [visualizer](https://tw.wordpress.org/plugins/tags/visualizer/)
 *  [進階檢視](https://tw.wordpress.org/plugins/glissando/advanced/)

## 評分

這個項目尚無任何評論記錄。

[撰寫評分](https://wordpress.org/support/plugin/glissando/reviews/#new-post)

[查看全部使用者評論](https://wordpress.org/support/plugin/glissando/reviews/)

## 參與者

 *   [ tomsgl ](https://profiles.wordpress.org/tomsgl/)
 *   [ Freemius ](https://profiles.wordpress.org/freemius/)

## 技術支援

使用者可在技術支援論壇提出意見反應或使用問題。

 [檢視技術支援論壇](https://wordpress.org/support/plugin/glissando/)