support audio embeds #2533
support audio embeds #2533
Conversation
| whiteSpace: 'nowrap' | ||
| }} | ||
| > | ||
| 🎵 {meta.title} |
There was a problem hiding this comment.
is "notes" the best graphic for representing audio? lots of audio might not be music, strictly speaking...
| return misleading | ||
| } | ||
|
|
||
| // Add after IMG_URL_REGEXP |
There was a problem hiding this comment.
I believe the above comment is forensically interesting [i.e., "look, Copilot is talking to the operator"], and probably does not belong in the production codebase.
| meta: { | ||
| href, | ||
| audioType: extension, | ||
| title: decodeURIComponent(pathname.split('/').pop().split('.')[0]) |
There was a problem hiding this comment.
is there no better guess for the reasonable text label of uncaptioned audio? I'm thinking, some combination of comment author, context [i.e. SN item ID], and filename only if it's not some hash or blob identifier, otherwise some reasonable timestamp.
| 'audio/aac', | ||
| 'audio/flac' | ||
| ] | ||
| export const AUDIO_EXTENSIONS = ['mp3', 'wav', 'ogg', 'flac', 'aac', 'm4a', 'opus'] |
There was a problem hiding this comment.
for some folks, the above lines might not be obviously fine; however, line 44 is about file types, while 37-42 are for MIME types, and there isn't any one-to-one mapping between categories of types.
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
useMediaHelperwith audio detection cascade;Integrated with existing
MediaOrLinkcomponent;Added CSS styling with theme compatibily.
Screenshots
2025-09-14-20-55-58.mp4
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!importantCSS override to prevent margin inheritance from general embed rules,implemented audio detection cascade in
useMediaHelperto maintain existing video/image logic, addedpreload='metadata'for performance while avoiding automatic downloadsChecklist
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