support audio embeds
Description
fix #2526
this implementation add native audio file embedding, allowing user to embed direct audio files links as playable HTML5 audio players within posts and comments.
Extended parseEmbedUrl() for audio file detection;
Added new "audio" provider to embed framework;
Extended useMediaHelper with audio detection cascade;
Integrated with existing MediaOrLink component;
Added CSS styling with theme compatibily.
Screenshots
https://github.com/user-attachments/assets/ba7b4635-4b2a-4413-99ab-e7b35b2e03ac
Additional Context
Audio detection is positioned early in parseEmbedUrl() to catch file links before other providers, uses both embed framework and media helper to garant a fallback if one fails,
supports query parameters in URLs (e.g., file.mp3?version=1), used !important CSS override to prevent margin inheritance from general embed rules,
implemented audio detection cascade in useMediaHelper to maintain existing video/image logic, added preload='metadata' for performance while avoiding automatic downloads
Checklist
Are your changes backward compatible? Please answer below: Yes
On a scale of 1-10 how well and how have you QA'd this change and any features it might affect? Please answer below: 8/10
For frontend changes: Tested on mobile, light and dark mode? Please answer below: yes
Did you introduce any new environment variables? If so, call them out explicitly here: NaN
Did you use AI for this? If so, how much did it assist you? I used AI to understand the context and identify the files to be modified, I asked for some implementation advice but the changes were all carefully considered and applied manually
[!NOTE] Adds first-class audio embedding for direct audio links with detection, playback UI, styling, and allowed MIME types.
- Embeds
- Add
audioprovider inparseEmbedUrl(detectsmp3/wav/ogg/flac/aac/m4a/opus/webm, extractsaudioTypeand title).- Render HTML5 audio player in
components/embed.jswith optional title and download link; new.audioWrapperstyles incomponents/text.module.css.- Media handling
components/media-or-link.js: supportaudioprop; render<audio>when detected; updateloadedlogic and error handling.useMediaHelper: cascade detection (video → audio → image); exposeaudioflag and include inshowMediagating.- Constants/URL
- Extend
UPLOAD_TYPES_ALLOWwith audio MIME types; addAUDIO_EXTENSIONSandAUDIO_URL_REGEXP.- Settings UI
- Update copy in
pages/settings/index.jsto include audio and list direct audio files as supported embeds.Written by Cursor Bugbot for commit 589a708eb566f86bb5dd84ce54ea354bbacd8a45. This will update automatically on new commits. Configure here.
Thank you for the detailed review. I've implemented all your requests: unused code removed, emoji replaced with SVG, detection logic fixed. You were right about the critical issue! Audio files were being caught as video in the cascade detection. I've fixed it through improved error handling. As you suggested, this PR focuses only on embedding direct audio links.