stacker.news icon indicating copy to clipboard operation
stacker.news copied to clipboard

support audio embeds

Open pory-gone opened this issue 4 months ago • 1 comments

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

Screen Shot 2025-09-14 at 20 59 56

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 589a708eb566f86bb5dd84ce54ea354bbacd8a45. This will update automatically on new commits. Configure here.

pory-gone avatar Sep 14 '25 19:09 pory-gone

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.

pory-gone avatar Oct 23 '25 17:10 pory-gone