5 ms·
Show HN: Yamanote.fun – A complete soundscape for Tokyo's Yamanote line
After visiting Japan for the first time a decade ago I became completely enamoured with Tokyo's Yamanote Line railway loop. Particularly the sonic experience of it. Like so many others I fell in love with the charming departure melodies and enjoyed discovering experiences like Yamanot.es (https://news.ycombinator.com/item?id=45045307 https://news.ycombinator.com/item?id=45045307) here on Hacker News when I returned home.
But it wasn't until my second trip to Tokyo that I truly appreciated how much the door chimes, on-board announcements and train noise were contributing to the rich soundscape that I loved.
I returned home and found myself playing YouTube videos of Yamanote Line journeys as I worked. The combination of sonics, ambience and softly spoken Japanese was incredibly soothing to me.
But these recordings were often incomplete, poorly captured or out of date, and I wanted something far more comprehensive.
So I gathered up all of the constituent parts from Reddit threads, YouTube videos and Japanese fan sites, and set about recreating the experience of riding the Yamanote Line in Logic Pro X. Melody, door chimes and announcement, all stitched together under a bed of train noise and ambience.
I turned those soundscapes into an Alexa Skill (https://www.amazon.co.uk/Paul-Jackson-Yamanote-Line/dp/B07S18QRMV https://www.amazon.co.uk/Paul-Jackson-Yamanote-Line/dp/B07S1...) in 2019 and began to think about a companion website to share the soundscapes with a wider audience.
Seven years later and that website is Yamanote.fun: https://www.yamanote.fun/ https://www.yamanote.fun/.
It's a small installable web app that plays the soundscapes like a playlist. All 30 stations and in both directions, since the inner and outer loops use different melodies. You can skip forward or back a station, and there's a scrub bar broken into melody / chime / ambience / announcement so you can jump straight to the bit you want. Each station has its own shareable link (yamanote.fun/jy13-ikebukuro-inner) that unfurls with the right station name and artwork when you share it.
It's a progressive web app too, so you can add it to your home screen and it behaves like a native app. There's an option to offline the audio too.
Under the hood it's relatively basic stuff: plain HTML, CSS & JS, audio served from Cloudflare R2 and the site hosted on Netlify. I was impressed to see how far I could get with the free tiers of these services. I designed the whole thing in Figma (I'm a Product Designer) and used Claude Code to architect and deliver the polished UI, PWA plumbing, offline caching and share-link infrastructure.
I would love feedback, particularly from anyone who's ridden the real thing.
- amigo7 3mo agoI love the Gui!
- deleted 3mo ago[deleted]
- nourihab 3mo agoWhat an incredibly detailed and calming project! I am really impressed with how you connected so many different audio materials to create a final PWA product. The very fact that it works offline and acts like a native application is enough to make it a great background soundtrack for focused work. I saw your mentioning of Claude Code as a means for handling PWA backend and offline caching issues. As a person who usually creates everything manually, I am willing to find out how it went for you. Did this solution manage to master the technical side of Service Workers and caching techniques at once or did it take a lot of iterations to get everything in order?
- madebymagnolia 3mo agoThank you. I appreciate your kind words. I've built PWAs with rich UIs and offline caching in the past and found that Claude Code produced results far quicker than I could. But it wasn't without it's quirks. The service workers and caching were handled pretty seamlessly I must say, but it took LOTS of iterations to get the UI behaving as I wanted, with the level of polish I was aiming for. There's probably a lesson about taste in here somewhere.
- jfim 3mo agoNo real feedback other than it's pretty awesome. It'd be cool to have a version of the display above the doors that shows the upcoming stations, but I'm not sure in practice if that would be that useful since I assume most people would have that in the background as you point out.
- madebymagnolia 3mo agoHa! Just before I began work on Yamanote.fun I actually asked Claude Design to replicate that display. It didn't go especially well and it led to me designing a custom interface in Figma that would work far better on mobile. As you can see, it was far from perfect: https://ibb.co/3D6GBsX https://ibb.co/3D6GBsX