Add ink integration UI and media playback

public/sounds/README.md

@@ -3,13 +3,14 @@ Sound Effects
 
 Story sound effect paths resolve relative to this directory.
 
-Use inline sound effect markup inside narrative text:
+Use a sound effect story tag:
 
 ```text
-The old door opens {{sfx:squeaky-door.ogg}} into the dark.
+#sfx[squeaky-door.ogg]
+The old door opens into the dark.
 ```
 
-The marker is removed from displayed text and from TTS input. It is kept as a timed media cue, preloaded by the client, and played when the text animation reaches that cue position.
+The server parses the tag into a structured `StoryTag`. The tag is never sent to the client as display text or TTS input.
 
 Supported browser-friendly formats are recommended: `.ogg`, `.mp3`, and `.wav`. Keep files small enough for responsive preload.
 
@@ -17,6 +18,9 @@ Sound effect loudness is controlled by the master volume and sound effects volum
 
 Document third-party source and license information here or next to the file.
 
-Current test asset:
+Current assets:
 
 - `squeaky-door.ogg`: Wikimedia Commons, "Squeaky door.ogg", sourced from PDSounds and marked public domain.
+- `steam-whistle.ogg`: Wikimedia Commons, "WWS SteamWhistle.ogg" by Work With Sounds / Konrad Gutkowski and Julian Blaschke, Creative Commons Attribution 4.0 International.
+- `horse-neigh.ogg`: Wikimedia Commons, "Wiehern.ogg" by Hue, released into the public domain by the author.
+- `church-bells.ogg`: Wikimedia Commons, "Churchbells.ogg" by Natalie, sourced from PDSounds and released into the public domain.