Inline Audio Player

CyberGene

flavour1 I’ll take a look.

CyberGene

v2.7.0 / v1.7.0 — Filename polish, new settings & beta 8 ready

A few quality-of-life improvements since v2.4.0 / v1.4.0:

Filename display

Long filenames are now truncated with ellipsis on narrow screens instead of overflowing the post width
Hovering over a truncated filename shows the full name in a tooltip
New admin setting: Hide numeric prefix from uploaded filenames (on by default) — strips the timestamp-userId- prefix that FoF Upload adds, so 1774205518-685373-debussy-girl-wih-flaxen-hair.mp3 displays as debussy-girl-wih-flaxen-hair.mp3

Player bar

The player bar now respects the pinned discussion list sidebar on wide screens — when the sidebar is pinned, the bar shifts right to match the content area instead of being overlapped

Flarum 2.0 beta 8 compatibility

FontAwesome icon references updated with a FA7 + FA6 fallback chain — works on both pre-beta-8 and beta-8+ installations
JS rebuilt with webpack-config v3 (flarum.reg.get) since flarum.core.compat was removed in beta 8

Admin settings (added in v2.4.0, documented here for completeness)

Setting	Default
Show download button on player bar	Off
Allow right-click on filename to save	On
Start playing immediately on first click	On
Hide numeric prefix from uploaded filenames	On

The new option "Hide numeric prefix from uploaded filenames" is meant to clean up the filenames that are created by FoF Upload, e.g. "1774205518-685373-song.mp3" → "song.mp3"

Update

composer update ekumanov/flarum-ext-inline-audio
php flarum cache:clear

Flarum 1.8 users: 1.x branch, tagged as v1.7.0 — same features (minus the beta 8 / FA7 changes which don't apply).

flavour1

Feature Request: Media Session API support for inline audio

thanks for the extension updates — it’s a really clean and lightweight solution for embedding audio and it already became a favorite feature in my forum community!

I noticed that when playing audio, system media controls (macOS/iOS Control Center, Android lock screen, Windows media overlay) display the Flarum discussion title instead of the actual audio track info. This is expected since no Media Session metadata is currently set.

Would you consider adding optional support for the Media Session API?

Proposed approach (kept minimal):

When an <audio> element starts playing, set navigator.mediaSession.metadata
Only run if mediaSession is available (no polyfills needed)
Keep it lightweight and non-invasive

Example:

if ('mediaSession' in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: audio.dataset.title || audio.currentSrc.split('/').pop(),
    artist: audio.dataset.artist || '',
  });
}

Metadata sources (simple fallback chain):

data-title / data-artist (if provided in markup)
Fallback to filename from currentSrc

This avoids adding dependencies or complex parsing (e.g., ID3), while still improving UX significantly.

Why this helps:

Correct track info shown on lock screens, Bluetooth devices, and OS media overlays
Consistent behavior across platforms (Android, iOS, Windows, macOS)
No impact on users who don’t need it

Again – thank you for this great extension!

CyberGene

v2.8.0 / v1.8.0 — Media Session API support

Thanks to @flavour1 for suggesting this — the inline player now sets the OS media-session metadata when a track starts playing, so system media widgets show the audio filename instead of the Flarum discussion title.

What this fixes

macOS Control Center / Now Playing widget shows the actual track name
iOS lock screen shows the track name while playing
Android lock screen shows the track name
Bluetooth headphones, car displays, and watch widgets all pick up the same metadata
OS hardware play/pause/stop buttons (lock screen, AirPods, headphones, car media controls) drive the inline player directly

How it works

Whenever a track is loaded into the player bar, the extension calls navigator.mediaSession.metadata = new MediaMetadata({ title: filename }) and registers play / pause / stop action handlers wired to the bar's audio element. Closing the player bar clears the metadata. The whole thing is feature-detected and wrapped in try/catch, so on browsers without Media Session API support it's a complete no-op.

No new settings, no new dependencies, no migrations.

Available on both branches

Flarum	Tag
2.0+	`v2.8.0` (`main`)
1.8	`v1.8.0` (`1.x`)

Update with:

composer require ekumanov/flarum-ext-inline-audio:^2.8.0   # Flarum 2.0+
composer require ekumanov/flarum-ext-inline-audio:^1.8.0   # Flarum 1.8

Both releases are functionally identical — only the build differs (webpack-config v3 / FA6 for main, v2 / FA5 for 1.x).

flavour1

this is fantastic 🥳

I really love this extension - simple, efficient, no overhead, great implementation!

flavour1

Sorry for being so demanding, but I still have another feature request:

(there's no rush, just another idea to make this extension even more awesome) 🙃

Adding an option to start audio playback at a specified timestamp with some query parameter (seconds or mm:ss) in the bbcode tags like:

[player start=1:30]https://acme.com/audio.mp3[/player]

This would be a great benefit to have precise referencing of moments in audio posts.

(this is not what i proposed before flavour1 , but just a simple implementation of starting the audio track at a specific timestamp.)

« Previous Page