Sound effects 🔊 #48
Sound effects 🔊 #48
Conversation
✅ Deploy Preview for hypertext-tv ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Wow, having sounds here really elevates things and makes it feel much more tactile! Thank you for the draft PR.
A few thoughts:
Client-side navigation
We probably do want to move to the client-side navigation to avoid sounds getting cut off during page navigation. However, I'm okay just getting sounds in place first, and following up with client-side routing stuff later, since that will require a larger amount of work.
Sounds
I love having a palette of sounds that play randomly, really adds to the effect!
Right now the sounds are firing on mouseup, which feels... not wrong, but not entirely correct?
CleanShot.2025-04-29.at.12.38.25.mp4
It made me think we could have separate samples for "down" and "up". That might be overkill, but tbh, we could use the same number of samples (11-12) and just split them between up/down (6 each) which I think would feel more realistic without adding unnecessary load time.
I'd also like to find some samples that feel a little less "clacky". These ones sound like the sort of buttons on a tape player:
I think the buttons we have on the TV would be a little more subdued.
|
Oh, one other thing! I would love to have white noise play when the static is visible on a channel before the webpage in the iframe has loaded. This might be something we can generate, instead of using a sample? The static is generated in an HTML Canvas, so maybe there's something we can do with sound there, too. This blog article is promising. |
This PR kicks off a process of adding sound effects to the hypertext.tv UI, starting with the “physical” buttons below the screen.
To do this I:
howler.jsto manage play back of an audio sprite.Some notes to go with this:
I’m not super happy with
howler.jsas it’s a pretty chunky library that does more than we need (~10 kB gzipped, 37 kB uncompressed). I got sidetracked looking at building a lighter weight alternative, which hopefully I could finish one day, but at this time it does feel like Howler is a reliable if somewhat outdated approach, which could be swapped out later.Because the channel change buttons cause page navigations, they can interrupt sound effect playback (especially when a channel was already visited as the navigation will be faster). Marking this as a draft PR for this reason so we can revisit whether to add Astro’s client router to improve handling here.
The audio sprite was created using recordings in the “Buttons and Levers” sound pack by Coral Island Studios on freesound.org, which are shared under the public domain Creative Commons 0 license.