Show HN: Yamanote.fun – 东京山手线的完整声音景观
摘要
一款渐进式网络应用,重现东京山手线的完整声音景观,包括车站旋律、车门提示音、广播和列车环境噪音,让用户通过可分享且支持离线使用的界面收听所有30个车站的双向声音。
十年前初次访问日本后,我彻底迷上了东京的山手线环线铁路,尤其是它的声音体验。和许多人一样,我被那些迷人的发车旋律所吸引,回家后还在Hacker News上发现了像Yamanot.es这样的体验(<a href="https://news.ycombinator.com/item?id=45045307">https://news.ycombinator.com/item?id=45045307</a>)。
但直到第二次去东京,我才真正体会到车门提示音、车内广播和列车噪音如何共同构成了我喜爱的那种丰富的声音景观。
回家后,我发现自己会在工作的时候播放山手线行程的YouTube视频。声音、环境音和轻柔的日语让我感觉异常舒缓。
但这些录音常常不完整、录制质量差或过时了,我渴望得到更全面的东西。
于是我从Reddit帖子、YouTube视频和日本粉丝网站收集了所有组成部分,开始用Logic Pro X重现乘坐山手线的体验。旋律、车门提示音和广播,所有元素都拼接在列车噪音和环境音的背景之上。
2019年,我将这些声音景观做成了一个Alexa技能(<a href="https://www.amazon.co.uk/Paul-Jackson-Yamanote-Line/dp/B07S18QRMV" rel="nofollow">https://www.amazon.co.uk/Paul-Jackson-Yamanote-Line/dp/B07S1...</a>),并开始考虑建立一个配套网站,让更多人能分享这些声音景观。
七年后,这个网站就是Yamanote.fun:<a href="https://www.yamanote.fun/" rel="nofollow">https://www.yamanote.fun/</a>。
这是一个小巧的可安装网页应用,像播放列表一样播放声音景观。覆盖所有30个车站,且双向都有,因为内外环使用不同的旋律。你可以向前或向后跳过一个车站,还有一个进度条,分为旋律/提示音/环境音/广播,让你可以直接跳到想听的段落。每个车站都有可分享的链接(yamanote.fun/jy13-ikebukuro-inner),分享时会显示正确的车站名称和图片。
它也是一个渐进式网络应用,你可以添加到主屏幕,表现得像原生应用一样。还提供了离线音频的选项。
底层技术相对基础:纯HTML、CSS和JS,音频来自Cloudflare R2,网站托管在Netlify上。我惊讶地发现这些服务的免费套餐能做到这么多。我在Figma中设计了整个界面(我是一名产品设计师),并使用Claude Code来构建和交付精美的用户界面、PWA管道、离线缓存和分享链接基础设施。
我非常希望得到反馈,尤其是来自那些真正乘坐过山手线的人。
相似文章
Yamanote 3D
在交互式3D世界中乘坐东京山手线,以全新方式探索这座城市标志性的环线。
在真实的日本时间中体验体素东京 – 乘坐山手线学习日语
Densha 是一款工具,将东京山手线的体素重建与实时天气和季节同步,并结合沉浸式日语课程(N5 级别),提供一种沉浸式的学习体验。
Show HN: 通过摄像头看见声音
Soundmap 是一款利用网络摄像头和已连接的智能手机实时可视化声音的网页工具,可将音频转化为视觉展示。
日本所有9300个火车站,按开通年份动画展示(1872–2026)
一个交互式可视化动画展示了从1872年到2026年日本所有9300个火车站的开通过程,展现了150年来铁路网络的扩展。
Show HN:网页版在纽约市中城摆荡
一个基于网页的互动体验,让用户在体素渲染的曼哈顿中城摆荡。