Hochi Runs: An archive built for listening
An independent label's catalog, artist context, and an experiment in browser-based audio.
Hochi Runs is an independent record label, collective, and agency working across music, artists, and events. I developed its website to give the label's catalog a home of its own, bringing releases, artwork, and editorial content together beyond the platforms where its music is distributed.
Alongside the archive, I've been experimenting with a browser-based listening interface inspired by projects like Catalog Radio and Dweller. It's an extension of a broader interest of mine in audio programming, interactive web tools, and the possibilities of independent music websites.
Role: Creative development and platform architecture
Scope: Label website, release archive, content integration, and experimental listening interface
Status: Public website with a radio beta in development
The website gives Hochi's releases a consistent place to live, with individual pages for credits, tracklists, and editorial context. Bandcamp remains the destination for purchases and full-release listening, while the website provides a space for exploring the catalog on the label's own terms.
The archive draws from Bandcamp's public release metadata, collected through a separate importer into a validated JSON snapshot. This avoids relying on live scraping during each visit.
Imported releases are merged with curated records while preserving existing URLs, catalog numbers, and source identities. Editorial content is handled separately, either through bundled data or a connected published feed, allowing artist profiles, descriptions, credits, events, and release visibility to change without disrupting the underlying catalog.
This separation keeps the music source, editorial work, and website presentation independent enough to evolve without maintaining competing versions of the same release.
- Bandcamp public metadata leads to Validated metadata import.
- Validated metadata import leads to Saved catalog snapshot.
- Saved catalog snapshot leads to Preserve release IDs and relationships.
- Curated release records leads to Preserve release IDs and relationships.
- Bundled editorial content leads to Validate and adapt editorial content.
- Published editorial feed leads to Cached read and publication invalidation.
- Cached read and publication invalidation leads to Validate and adapt editorial content.
- Preserve release IDs and relationships leads to Effective catalog and editorial content.
- Validate and adapt editorial content leads to Effective catalog and editorial content.
- Effective catalog and editorial content leads to Archive.
- Effective catalog and editorial content leads to Artist profiles.
- Effective catalog and editorial content leads to Release pages.
- Effective catalog and editorial content leads to Shared player catalog.
The radio beta began as an opportunity to explore how listening could become part of the website itself.
Rather than a live broadcast or scheduled queue, it uses available Bandcamp previews through a shared player that continues across internal navigation. Visitors can move between the archive, artist profiles, and release pages while listening, with the selected artwork informing a responsive visualizer.
Playback architecture
The player stays mounted in the site's root layout, retaining a single native audio element as pages change.
A same-origin route resolves eligible Bandcamp previews and verifies the selected track before delivering audio, without storing local audio files. When native playback isn't available, visitors can open Bandcamp's official player instead.
- Artwork or Play preview gesture leads to Select release and unlock Web Audio.
- Select release and unlock Web Audio leads to Resolve eligible preview identity.
- Resolve eligible preview identity leads to Return fingerprint and stream path.
- Return fingerprint and stream path leads to Recheck selection and stream audio.
- Recheck selection and stream audio leads to One native audio element.
- Internal page navigation leads to Player retained in the root layout.
- Player retained in the root layout leads to One native audio element.
- One native audio element leads to Playback, seeking, volume and progress.
Visual rendering
The visualizer combines colors sampled from the selected artwork with frequency data from a Web Audio analyser. Bass, mids, and treble influence a WebGL light field, with Artwork, Wordmark, and Both modes offering different ways to experience the composition.
Rendering runs independently of playback and respects reduced-motion preferences. Audio remains available if the graphics fail or the visualizer isn't active.
- Native audio element leads to Web Audio analyser.
- Web Audio analyser leads to Gain and audio output.
- Web Audio analyser leads to Approximate bass, mids and treble.
- Approximate bass, mids and treble leads to WebGL renderer.
- Selected release artwork leads to Sampled color palette.
- Sampled color palette leads to WebGL renderer.
- Artwork, Wordmark or Both leads to WebGL renderer.
- Reduced motion preference leads to WebGL renderer.
- WebGL renderer leads to Visual composition.
Artwork and sound
The relationship between artwork and audio gives each release its own visual character. The images below show how the light field changes during playback and across different releases.
![POP OUT [AMAL + MARVEL] in Wordmark view at 0:08 with a subdued orange field behind the Hochi wordmark](/static/hochi-runs/side-orders-wordmark-0008.png)
![POP OUT [AMAL + MARVEL] in Wordmark view at 1:11 with a bright orange and gold field behind the Hochi wordmark](/static/hochi-runs/side-orders-wordmark-0111.png)
Side Orders v1 — Hochi Runs. POP OUT [AMAL + MARVEL] in Wordmark view at 0:08 and 1:11, showing the orange and gold field changing during playback. Captured October 9, 2026.
I've always been interested in audio programming, sound design, and interactive tools that can live directly in a browser. Catalog Radio's open-source repository gave me an opportunity to explore those interests through an existing project.
I spent time studying its approach to browser-based listening and reconstructing parts of the experience for Hochi, using Bandcamp previews in place of Catalog's original music infrastructure. It became a way to better understand the systems behind an interface I admired, while seeing how they could work in a different context.
What I appreciate most is that the code remains accessible even though Catalog itself has shut down. There's a tendency to treat discontinued platforms as though the work behind them disappears too. But the repository is still there, available for anyone curious enough to open it, learn from it, or take those ideas somewhere else.
Dweller's approach to integrating listening into its own website was another reference. Both projects connect to something I've been interested in for a while: independent spaces where music, design, and technology can exist together without every experience having to begin and end on a streaming platform.
The website is a working archive, while the listening interface remains an experiment.
There's room to develop the underlying infrastructure further, including a dedicated archive database and potentially owned audio delivery for formats beyond individual previews, such as recorded sessions or continuous programming.
I'm interested in where these tools can go, especially when they're built around the needs and identities of independent artists and labels. For now, Hochi is a place to explore those ideas through something that people can actually use.
The website's visual composition is closely adapted from Surf Gang Records, originally designed and developed by taw vision. My work involved adapting that composition to Hochi's catalog, modifying typography, and independently developing the frontend, backend, content infrastructure, and listening interface.
Additional references include The Lot Radio by Decimal and Catalog Radio.
Original design credit for the adapted composition belongs to taw vision. This independent implementation is not affiliated with or endorsed by taw vision or Surf Gang Records.