Inline Audio Player

navindra

CyberGene Very cool! I wonder if the same approach would work generically for video as well.

Capybara

navindra Autovideo setting in FoF Formatting already does this — just paste a link and it instantly turns into a player in the preview

navindra

Capybara Indeed, all I did was add "mp3" to this list and it worked... Although the video player is a bit bigger than technically needed for audio alone.

s9e/TextFormatterblob/master/src/Plugins/Autovideo/Configurator.php

CyberGene

This is now also 2.0 compatible, not sure how to edit the discussion and add the 2.0 tag.

CyberGene

Inline Audio Player — v2.0.1 / v1.1.1

Hey everyone! Dropping an update for Inline Audio Player, my actively maintained replacement for the abandoned Inline Audio (aka Audio URL to Player) extension.

What's new in this release

Collapsible players with filename labels

Audio links are now replaced by a compact, clickable filename — the HTML5 player stays hidden until the user clicks it. Posts with multiple audio files stay clean and readable; the player only appears when someone actually wants to listen.

Play/pause icon with pulsating animation

A circle-play icon sits in front of every filename. The moment audio starts, it switches to a circle-pause icon that slowly pulses — giving a clear at-a-glance indicator that something is playing, even when the player is collapsed back.

Users who prefer reduced motion (prefers-reduced-motion: reduce) see a steady icon instead of the animation.

`[player]` BBCode now matches auto-detected links

The [player]URL[/player] BBCode now produces the same collapsible UI as auto-detected links, including extracting and displaying the filename from the URL.

HTML5 player follows the Flarum theme

The native browser audio control now respects the Flarum light/dark theme rather than the OS-level preference. Works with FoF Night Mode too.

Accessibility improvements

Keyboard-navigable with a visible :focus-visible ring
aria-label on every audio element for screen readers
Semantic <details>/<summary> markup

Screenshots

Players collapsed, not playing

One player open and playing

Install / Update

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

Works for both Flarum 1.8 (installs v1.1.1) and Flarum 2.0+ (installs v2.0.1) — Composer picks the right version automatically based on your installed flarum/core.

Links

Supported formats: mp3 · wav · ogg · flac · m4a · aac · webm · mp4 · mpeg · mpg · wave

Feedback and bug reports welcome!

CyberGene

Yes, I know, I'm making too many releases but this one is good and I'm using Claude Code, so coding is 100x faster than usual 😀

v2.2.0 / v1.2.0 — Overlay Player Bar

This release replaces the per-post collapsible player with a shared overlay bar fixed at the bottom of the page.

What's new

Instead of a player expanding inside each post, audio links now show only a compact filename with a play icon. Clicking the filename loads it into a persistent bar at the bottom of the viewport — the rest of the page stays readable and uncluttered.

Posts with audio links — no player open:

No player open

Player bar active:

Player open

Player bar features:

Standard HTML5 audio controls (scrubber, volume, speed)
Track name on the left — click it to scroll back to the source post
Download button — works in all browsers including Safari
Close button — stops playback and dismisses the bar
Clicking the same filename again toggles play/pause
Only one track plays at a time; starting a new one stops the previous
Bar rises above the composer when you open it to reply

Icons in posts:

Circle-play icon precedes each filename
Switches to a pulsating circle-pause while that track is playing

Accessibility & polish:

Keyboard navigable, screen reader labels update dynamically (Play / Pause / Resume)
Respects prefers-reduced-motion
On narrow screens: filename fills available width, controls shrink to natural size
Player bar follows the Flarum light/dark theme

Compatibility

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

Composer picks the right version automatically — the install/update commands are the same for both Flarum versions.

Staying on the previous version

If you prefer the old collapsible in-post player, pin to the last release before this change:

Flarum 2.0: composer require ekumanov/flarum-ext-inline-audio:~2.1
Flarum 1.8: composer require ekumanov/flarum-ext-inline-audio:~1.1

Update

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

navindra

CyberGene I'm using Claude Code, so coding is 100x faster than usual

Remarkable. Any reason you prefer Sonnet over Opus?

CyberGene

navindra Sonnet is faster than Opus when it needs to implement a method or do something that is relatively simple. I usually create a plan with Opus and then execute it with Sonnet. Besides, Opus consumes more and can exhaust your quota faster.

flavour1

Great Extension!

This might be overkill, but what I'm looking for is a way to "reply" to certain timestamps in the way of mentions, like it is done on SoundCloud's comment system. I guess this would require some extensive js like https://wavesurfer.xyz or https://codeberg.org/chrisn/peaks.js. Anyway - just a thought.

Some more realistic feature requests:

Make the Download Button in the Player Bar optional
Add an option to replace the filename text (from url, maybe markdown or bbcode)

Thank you for your contribution with this extension! Complements perfectly with fof/formater and media embeds!

CyberGene

flavour1 This might be overkill, but what I'm looking for is a way to "reply" to certain timestamps in the way of mentions, like it is done on SoundCloud's comment system

This will indeed be very difficult and will require a different approach since the current one uses standard HTML5 players and those are provided by the browser, so there's no customization and interaction flexibility with it. My HTML and JS experience is almost zero, to be honest 😀 I'm relying on Claude Code to generate this stuff. It helps that I'm a software engineer and can review the code and make good prompts but that's about it. That being said, the possibilities are endless with AI-coding and even a difficult task like that would probably be possible, so I might give it a try someday.

flavour1 Make the Download Button in the Player Bar optional

Yeah, I thought about that. I asked Claude Code if providing an extension page with settings is feasible and it replied that although this is something that can certainly be done and is part of well-developed extensions, it involves PHP (not just JS as it is now) and thus introduces more area for bugs and problems. My experience with AI-coding so far, both professionally and for personal projects (such as this one) is once you go over certain complexity, the agents start producing sub-optimal code and one has to be experienced in the field, to supervise it deeply. So, for the moment I prefer keeping these AI-coded extensions as simple as possible. I think the download button can easily be removed through CSS, I can check which one it is.

flavour1 Add an option to replace the filename text (from url, maybe markdown or bbcode)

Currently the extension detects audio in two ways:

A regular link such as [title for the link](https://acme.com/audio.mp3) - the text you click to open the player will be title for the link, which is where you can control it
the [player]https://acme.com/audio.mp3[/player] tags - in this case I've programmed the extension to extract the name audio.mp3, so there's no control.

huseyinfiliz

CyberGene Yeah, I thought about that. I asked Claude Code if providing an extension page with settings is feasible and it replied that although this is something that can certainly be done and is part of well-developed extensions, it involves PHP (not just JS as it is now) and thus introduces more area for bugs and problems.

If you’d like, I can take care of this for you. I can prepare a PR that adds this setting to your admin extension page. Would that work for you?

By the way, I think Claude Code can handle this as well. Start it in plan mode and ask it to review the relevant Flarum 1.x documentation. Then take the plan it provides and send it to another chatbot (like Gemini Pro) for validation. If it approves, you can go ahead and approve it in Claude Code.

CyberGene

huseyinfiliz f you’d like, I can take care of this for you. I can prepare a PR that adds this setting to your admin extension page. Would that work for you?

Thanks, I think I'll do this with Claude Code myself because it looks like something interesting and new to learn 🙂

huseyinfiliz By the way, I think Claude Code can handle this as well. Start it in plan mode and ask it to review the relevant Flarum 1.x documentation. Then take the plan it provides and send it to another chatbot (like Gemini Pro) for validation. If it approves, you can go ahead and approve it in Claude Code.

Thanks, these are good suggestions and BTW I use similar workflow at work (I'm a Java backend engineer). We use Cursor and it's similar to Claude Code, and within the same chat context we can switch models underneath and I prepare plans with Opus and then execute with Sonnet, but sometimes also validate the plans in Gemini Pro, so going between entirely different models (Anthropic vs Google) seems to be very good sometimes, it's like having two architects refining a common strategy 🙂

CyberGene

v2.3.0 / v1.3.0 — Admin Settings

Small but useful one: the extension now has a settings page in the admin panel.

What's new:

Show download button on player bar — toggle to hide or show the download button. Enabled by default, so existing installs are unaffected.

That's it for now, more settings to come as needed.

Compatibility

Version	Branch	Flarum
v2.3.0	`main`	2.0+
v1.3.0	`1.x`	1.8

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

navindra

CyberGene Opus consumes more and can exhaust your quota faster.

Ah yes, by that token, Opus can consume up to 6 times more gallons of water than Sonnet.

https://spectrum.ieee.org/ai-water-usage

flavour1

wow! - those are well-thought features now!
it runs fluently and fits perfectly - thank you very much for this extension!

CyberGene My experience with AI-coding so far, both professionally and for personal projects (such as this one) is once you go over certain complexity, the agents start producing sub-optimal code and one has to be experienced in the field, to supervise it deeply.

I totally subscribe to that!
I used to work in software development too, but not much with web, mostly app and network stuff.
But I learned that well-coded design looks and feels simple, even when a lot is going on under the hood.

CyberGene

v2.4.0 / v1.4.0 — Admin settings & right-click download

This release adds three new admin settings (under Extensions → Inline Audio Player) and improves the download experience.

New: Right-click to save
The in-post filename is now rendered as a native <a download> link. Right-clicking it gives you the browser's built-in "Save link as" menu — no custom UI, just the browser doing what it already knows how to do. Left-clicking still loads the track into the player bar as before.

New admin settings

Setting	Default
Allow right-click on filename to save	On
Show download button on player bar	Off
Start playing immediately when a filename is clicked	On

The download button in the player bar is now opt-in (previously always visible). If you had it showing and want to keep it, enable the toggle in the admin panel.

Update

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

Flarum 1.8 users: use the 1.x branch — same features, tagged as v1.4.0.

flavour1

little bug: when showing the sidebar nav (DiscussionList pinned on the left side), the player does not respond to the Page DiscussionPage width.

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).