Refactor of a Hi‑Fi Music Player in JavaScript

on YouTube ↗50m

" summary

A refactor of RuneAudio into version 2.0 that turns low-cost mini‑PCs into hi‑fi music players using a unified stack: a Node.js backend (API + WebSocket) and a single‑page frontend. The work focuses on performance and modern techniques—occlusion culling, lazy loading, caching, job queues—and uses Mithril and Fastify as key technologies.

AI-written summary · about

" chapters (15)

1. 0:00Project intro
2. 2:15Hi-Fi inspiration
3. 8:18Windows to Linux audio
4. 13:17Web player reasons
5. 16:08Refactor existing app
6. 22:15Live demo interface
7. 25:19Optimize long playlists
8. 30:24Cover art smooth scroll
9. 35:04Intersection Observer
10. 35:26PHP backend to JS
11. 38:38Fastify extreme perf
12. 41:54Input validation backend
13. 44:03Caching worker queues
14. 46:10Fastify frontend benefits
15. 48:20Conclusion

" related talks

• 27mJavaScript @ SpotifyFelipe Ribeiro · JSConf Iceland 2016
• 40mScalable JavaScript architectureFrank Baele · Frontend United 2016
• 40mLiveJS: Making Music with JavaScriptRuth John, Martin Schuhfuss, Matt Mckegg · ColdFront 2017
• 21mNode & Musical PerformanceHugh Rawlinson · NodeConfEU 2015
• 24mLocal-first app developmentJohannes Schickling · App.js Conf 2023
• 21mr-audio: Declarative, reactive and flexible Web Audio graphs in ReactJakub Fiala · Web Audio Conference 2018
• 31mI Play the JavaScriptMatt Mckegg · NodePDX 2016
• 44mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · NDC Sydney 2024