PHPackages                             ianhobbs/audio-block - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Image & Media](/categories/media)
4. /
5. ianhobbs/audio-block

ActiveKirby-plugin[Image & Media](/categories/media)

ianhobbs/audio-block
====================

An extended audio player block for Kirby CMS with poster image, title, subtitle, description and color options

v1.0.2(yesterday)02—0%MITPHPPHP >=8.2

Since Aug 16Pushed todayCompare

[ Source](https://github.com/ianhobbs/kirby-audio-block)[ Packagist](https://packagist.org/packages/ianhobbs/audio-block)[ Docs](https://github.com/ianhobbs/kirby-audio-block)[ RSS](/packages/ianhobbs-audio-block/feed)WikiDiscussions main Synced today

READMEChangelog (1)Dependencies (1)Versions (4)Used By (0)

Audio Player Block for Kirby
============================

[](#audio-player-block-for-kirby)

An extended audio player block for [Kirby CMS](https://getkirby.com). Displays an audio file with a poster image, title, subtitle, rich-text description, and configurable background/text colors — in the Panel and on the front end.

Registered as the block type `audio-player`, so it will not conflict with any site or plugin block named `audio`.

[![Block type: audio-player](https://camo.githubusercontent.com/50abf479cb32acdaae9d9999225ad47e58563a707b78eb394c43f22db27a48a3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f626c6f636b2d617564696f2d2d706c617965722d626c7565)](https://camo.githubusercontent.com/50abf479cb32acdaae9d9999225ad47e58563a707b78eb394c43f22db27a48a3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f626c6f636b2d617564696f2d2d706c617965722d626c7565) [![License: MIT](https://camo.githubusercontent.com/f8df3091bbe1149f398a5369b2c39e896766f9f6efba3477c63e9b4aa940ef14/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d677265656e)](https://camo.githubusercontent.com/f8df3091bbe1149f398a5369b2c39e896766f9f6efba3477c63e9b4aa940ef14/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d677265656e)

Features
--------

[](#features)

- Audio file (`mp3`, `m4a`, `aac`, `wav`, `ogg`, `flac`, `aif`, `aiff`) with poster image (`jpg`, `jpeg`, `png`, `webp`, `svg`)
- Title, subtitle, and inline writer description (bold/italic)
- Background and text color pickers
- Settings tab: show controls, autoplay
- Live Panel preview with inline editing (double-click to edit text in place)

Accepted filetypes ; mp3, m4a, aac, wav, ogg, flac, aif, aiff.

Installation
------------

[](#installation)

### Manual

[](#manual)

Copy this folder to `site/plugins/ianhobbs-audio-block`.

### Git submodule

[](#git-submodule)

```
git submodule add https://github.com/ianhobbs/kirby-audio-block.git site/plugins/ianhobbs-audio-block
```

### Composer

[](#composer)

```
composer require ianhobbs/audio-block
```

Usage
-----

[](#usage)

Add the block type to a blocks or layout field in your blueprint:

```
fields:
  text:
    type: blocks
    fieldsets:
      - audio-player
      - text
      - image
```

Render blocks in your template as usual:

```

```

### Front-end styles

[](#front-end-styles)

The plugin ships a stylesheet at `assets/audio-player.css` and loads it **automatically** — no template change required. It is injected before `` only on pages whose rendered HTML contains the block (`.audio-wrapper`), and skipped if the stylesheet is already linked in the page.

Control this with the `ianhobbs.audio-block.css` option in `site/config/config.php`:

```
return [
  // true (default) – load the shipped stylesheet automatically
  // false          – load nothing, style the block yourself
  // string         – URL of your own stylesheet to load instead
  'ianhobbs.audio-block.css' => true,
];
```

To include the shipped stylesheet manually instead, turn the option off and link the published asset in your `` snippet:

```