support audio embeds #2533

pory-gone · 2025-09-14T19:01:04Z

Description

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

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 !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 audio provider in parseEmbedUrl (detects mp3/wav/ogg/flac/aac/m4a/opus/webm, extracts audioType and title).
- Render HTML5 audio player in components/embed.js with optional title and download link; new .audioWrapper styles in components/text.module.css.
Media handling
- components/media-or-link.js: support audio prop; render <audio> when detected; update loaded logic and error handling.
- useMediaHelper: cascade detection (video → audio → image); expose audio flag and include in showMedia gating.
Constants/URL
- Extend UPLOAD_TYPES_ALLOW with audio MIME types; add AUDIO_EXTENSIONS and AUDIO_URL_REGEXP.
Settings UI
- Update copy in pages/settings/index.js to include audio and list direct audio files as supported embeds.

^{Written by Cursor Bugbot for commit 589a708. This will update automatically on new commits. Configure here.}

adlai

I really shouldn't be considered qualified to review anything related to webapps; however, my comments are provided in the hope that they help reduce the concerns of critics who wish to review the PR.

adlai · 2025-10-03T00:05:45Z

components/embed.js

+            whiteSpace: 'nowrap'
+          }}
+          >
+            🎵 {meta.title}


is "notes" the best graphic for representing audio? lots of audio might not be music, strictly speaking...

While arguable, audio files are historically represented by a music note, so it's okay to use it.

But @pory-gone you should use an SVG instead of an emoji: https://remixicon.com/icon/file-music-line

adlai · 2025-10-03T00:08:25Z

lib/url.js

  return misleading
 }

+// Add after IMG_URL_REGEXP


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.

adlai · 2025-10-03T00:17:38Z

lib/url.js

+        meta: {
+          href,
+          audioType: extension,
+          title: decodeURIComponent(pathname.split('/').pop().split('.')[0])


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.

This PR focuses on embedding audio from a link, this would just complicate things

adlai · 2025-10-03T01:03:02Z

lib/constants.js

+  'audio/aac',
+  'audio/flac'
 ]
+export const AUDIO_EXTENSIONS = ['mp3', 'wav', 'ogg', 'flac', 'aac', 'm4a', 'opus']


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.

Soxasora

Well, it definitely can embed links that ends with an audio extension.

Logic

There are two logics (mmh) and both are flawed:

via Embed: link has to end with an extension
via audio.onload: audio files can be reproduced as video elements

I left a comment on how you could address this.
I want to note that yesterday I opened PR #2599 that would remove the need to load the file to know its type. It could come in handy for this PR.

Style

The style has weird measurements, is inconsistent across browsers and the dark/light switch is pretty painful:

Chrome

Safari

The animation is cool to see, but not really needed and makes thinking about the style harder than it could be.

I left some comments about other things I found, I'd like for you to address them.

In conclusion, focus on using the best logic you can think of. That's what's most important!

Soxasora · 2025-10-12T12:38:09Z

components/embed.js

+            whiteSpace: 'nowrap'
+          }}
+          >
+            🎵 {meta.title}


While arguable, audio files are historically represented by a music note, so it's okay to use it.

But @pory-gone you should use an SVG instead of an emoji: https://remixicon.com/icon/file-music-line

Soxasora · 2025-10-12T13:09:32Z

lib/url.js

+// Add after IMG_URL_REGEXP
+export const AUDIO_URL_REGEXP = /^(https?:\/\/.*\.(?:mp3|wav|ogg|flac|aac|m4a))$/i


Unused and not necessary, probably you got inspiration from the other regexes at the bottom, but they don't serve a purpose afaik

Soxasora · 2025-10-12T13:15:15Z

lib/constants.js

+  'audio/aac',
+  'audio/flac'
 ]
+export const AUDIO_EXTENSIONS = ['mp3', 'wav', 'ogg', 'flac', 'aac', 'm4a', 'opus']


Unused and not necessary

Soxasora · 2025-10-12T13:30:26Z

components/media-or-link.js

    const video = document.createElement('video')
    video.onloadedmetadata = () => {
      setIsVideo(true)
      setIsImage(false)
    }
    video.onerror = () => {
-      // hack
-      // if it's not a video it will throw an error, so we can assume it's an image
-      const img = new window.Image()
-      img.src = src
-      img.decode().then(() => { // decoding beforehand to prevent wrong image cropping
-        setIsImage(true)
-      }).catch((e) => {
-        console.warn('Cannot decode image:', src, e)
-      })
+      const audio = document.createElement('audio')
+      audio.onloadedmetadata = () => {
+        setIsAudio(true)
+        setIsImage(false)
+        setIsVideo(false)
+      }


Audio files can be reproduced as videos, so it will never create an audio element:

(this is <video>)

Soxasora · 2025-10-12T13:39:34Z

components/media-or-link.js

+      {audio
+        ? <audio
            ref={ref}
            src={src}
-            preload={bestResSrc !== src ? 'metadata' : undefined}
            controls
-            poster={bestResSrc !== src ? bestResSrc : undefined}
+            preload='metadata'
            width={width}
            height={height}
            onError={onError}
            onLoadedMetadata={handleLoadedMedia}
          />


This way we would have a styled Audio component (parsed from link) and an unstyled audio container (from upload).

You have some choices:

Don't use Embed for audios

you wouldn't need an extension, but you'd need to fix the way you recognize it's an audio in useMediaHelper

Upload audio files without the ![]() markdown so it can be parsed as embed

you would also need to append the extension based on the mime type, because your parser checks for extensions, and then remove the extension when the embed... but then the raw link would be broken... mhh...

Audio component shared between embeds and uploads

still two logics for audios

Soxasora · 2025-10-12T14:12:04Z

lib/url.js

+        meta: {
+          href,
+          audioType: extension,
+          title: decodeURIComponent(pathname.split('/').pop().split('.')[0])


This PR focuses on embedding audio from a link, this would just complicate things

…rt_audio_embeds

…ews into support_audio_embeds

…rt_audio_embeds

pory-gone · 2025-10-23T17:03:32Z

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.

support audio embeds

3df6f3d

pory-gone marked this pull request as ready for review September 14, 2025 19:02

adlai reviewed Oct 3, 2025

View reviewed changes

Soxasora self-requested a review October 12, 2025 12:34

Merge branch 'master' into support_audio_embeds

589a708

Soxasora requested changes Oct 12, 2025

View reviewed changes

pory-gone added 4 commits October 12, 2025 19:34

Merge branch 'master' of github.com:pory-gone/stacker.news into suppo…

5cc9a59

…rt_audio_embeds

Merge branch 'support_audio_embeds' of github.com:pory-gone/stacker.n…

6243e26

…ews into support_audio_embeds

Merge branch 'master' of github.com:pory-gone/stacker.news into suppo…

3bdb552

…rt_audio_embeds

fixing wrong implementation

95dbd78

pory-gone requested a review from Soxasora October 23, 2025 19:03

		// Add after IMG_URL_REGEXP
		export const AUDIO_URL_REGEXP = /^(https?:\/\/.*\.(?:mp3\|wav\|ogg\|flac\|aac\|m4a))$/i

Uh oh!

support audio embeds #2533

Are you sure you want to change the base?

support audio embeds #2533

Uh oh!

Conversation

pory-gone commented Sep 14, 2025 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screenshots

Additional Context

Checklist

Uh oh!

adlai left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Soxasora left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pory-gone commented Oct 23, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

pory-gone commented Sep 14, 2025 •

edited by cursor bot

Loading

adlai left a comment •

edited

Loading

Soxasora left a comment •

edited

Loading