Injects music UI on mount, re-injects on React remount, and appends lines into Riffusion’s lyrics textarea so React always registers them.
🛠️ Purpose
This script enhances the Riffusion UI by adding a persistent music annotation interface that appends structured lyric metadata into the lyrics text area. It ensures that entries are React-compliant and remain intact across page or component remounts. 🎨 What It Adds to the UI
It injects a custom interface with the following dropdowns and input elements:
Section/Phrasing – e.g., Intro, Chorus, Bridge, Skit, etc.
Timing Signature – options like 4/4, 3/4, 6/8, 5/4
BPM – from 60 to 180
Genre – dynamically loaded from an external genres.json Gist
Transition Notes – a free-text field
Submit Button – compiles all above into a formatted lyric tag and appends it to the Riffusion lyrics textarea
🔁 React-Friendly Sync
It uses a setNativeValue() helper to trigger real React state updates, making sure text input is recognized by Riffusion’s React component tree (important for preserving edits). 🔍 How It Stays Persistent
It observes the DOM using a MutationObserver:
Watches for React component remounts
Reinserts the UI if the container is re-rendered
Also tries injecting immediately on script run
📥 Dynamic Genre Loading
Genres are fetched from this URL: https://gist.githubusercontent.com/regtable/.../genres.json It parses and populates the genre dropdown unless fetch fails (in which case it displays a fallback option). 🧠 Output Format
Clicking "Submit" builds a metadata line like:
[Chorus - , 4/4 time , 120 BPM , genre: glitchcore , fades in softly],
And appends it to the Riffusion lyrics textarea with proper newline handling. 💡 Use Case
Perfect for users composing structured, AI-aware music annotations, especially in environments like Riffusion, where lyric sections need to be explicitly tagged and reactively preserved.