五分钟撸了一个写代码听雨声的小站

[qianji201712]

网站地址 http://rain.xxoojoke.com/ 功能：播放雨声+钢琴音

雨声是网上找的，其实我一直有听下雨声的习惯，听了很多回后发现，这个雨声其实是最舒服最自然的，所以就驾到站点了。 另外，钢琴是 《 In Autumn, the Leaves Came to Our House 》 估计大家也都听过。

之所以做这个，是发现这个雨声和钢琴搭配很完美，基本上我一周全天都在一起听，午休也听，很容易放松下来，这个雨声听着听着会让人恍惚真感觉在下雨。

前段时间由于工作关系，每天很焦虑，晚上经常失眠，就听这个助眠，欢迎大家体验。

目前雨声和钢琴都是固定的，因为没有找到比这两者更完美结合的了。

附上音乐链接 https://music.163.com/#/song?id=17746129
作者 Fariborz Lachini 大师

关于版权： 这个音乐目前没有找到版权信息，我去各大音乐网站搜索，发现都有这首钢琴曲，如果真的侵权，我会立即更改的。

这个小站本来只是玩玩，没想到收到这么多的反馈，我继续改进改进，感谢大家！

再补充一下：
刚刚更新了一下小站，增加了停止播放时的声音逐渐变小效果。
有好几个朋友问我这个小站怎么建的，其实做 Web 开发的大佬们都知道，这种功能简单的网站，分分钟就撸出来了。
用的都是最基本的 HTML 语法和 JS，播放音乐控件是 HTML 自带的 <audio> 标签，唯一需要处理的就是点击按钮进行播放 /暂停，以及暂停时的声音逐渐变小处理。
这个小站几乎用不了什么配置，服务器是阿里云的（ 2 核 4G ），就是一个静态网页而已，我是做 Android 开发的，Web 端开发能力只停留在 Google+Copy 阶段。
只希望这个小站可以给大家带来帮助~

[jinksw]

真好听 很喜欢，谢谢

[maninfog]

mac 蓝牙老是出问题，直接放弃上班🎵，难受

[qianji201712]

@jinksw 目前的音乐我感觉最舒服，如果后期发现其他的音乐，我考虑加一个自定义的功能

[denonw]

还挺好用，希望能加一个自定义音乐的功能。

[qianji201712]

@maninfog 你缺一个好的耳机 hahhhh

[qianji201712]

@denonw 详细描述一下呢？比如怎么自定义之类的

[maninfog]

@qianji201712 不是耳机呀，是 mac 蓝牙容易受干扰，还有就是蓝牙时好时坏

[keysona]

试了下，感觉不错，就是网址让我有点出戏。

xxoojoke....

[rafa]

确实很棒，赞一个

[holyghost]

老哥域名砸手里了吧。。。

[qianji201712]

@keysona = = 这个域名是几年前买的，哈哈，因为一个段子

[agdhole]

放松音乐推荐:

歌单: https://open.spotify.com/user/chilledcow/playlist/6eHO8aX6lHu3e6bem8r2rq?si=vja_wWSNQDGpuBA64MZXlw

[qianji201712]

@agdhole 666 收录了，感谢！

[rabbbit]

https://freesound.org/
找雨声的话上面这个网站有很多,几个小时长的都有.

我自用的导航里的白噪声也是在这上面找的 https://aaron-bird.github.io/Lactuca/

[gzlock]

希望楼主可以获取到授权再“收录”

[0Zed]

感谢分享

[xiangyuecn]

www.rainymood.com

[phikao]

https://douban.fm/channel/3385917?start=1385917gc50fg0，同样有雨声，晚上听爽到爆。

[agdhole]

@qianji201712 y2b 可以搜搜 lofi hip hop,都是这种类型的音乐

[qianji201712]

@gzlock 多谢提醒，主要这个音乐我看到处都有，各大音乐站点都免费的，其实我也没找到可以授权的地方

[qianji201712]

@rabbbit 多谢！先收录下来

[husky]

https://music.163.com/song?id=32070215
雨声好像是这个

[grimpil]

@xiangyuecn
rainymood 这个网站有十来年了吧

[zz25]

不错啊 老哥，收藏了！
在家的时候特别在窗户看外面下雨
特别是外面下雨的时候，在家里睡觉听着雨声睡觉，整个人都感觉好放松好舒服

[qianji201712]

@grimpil 这个网站很早了，之前我也听过，很不错的

[qianji201712]

@zz25 欢迎体验啊 :)

[heart4lor]

很棒啊 雨声很合适 之前在各种白噪音 APP 上找的雨声都很吵杂 这个很棒 希望能加入暂停 /播放时声音渐变功能

[Lombard]

推荐一个 app，小睡眠，啥声音都有，还能混合播放。

[fuxinya]

@agdhole #12 我擦嘞，还能插入视频，火星，长见识了

[TwoDogSon]

@agdhole 老哥好评！ 我也经常听他 偶尔会说话

[qianji201712]

@husky 不是哦，不过你这个也很舒服啊，收藏了，感谢！

[qianji201712]

@Lombard 用过一阵子，发现太多了，有些乱，而且我主要是上班时听，打开网页比较舒服哈

[qianji201712]

@TwoDogSon 欢迎体验啊

[qianji201712]

@heart4lor 多谢反馈，我先记下来

[ontheway1215]

不错

[liuhouer]

TaoMix app，可以自己选哪些大自然的声音。球滚动到哪，就响哪个声音。鸟,动物，雨水，海洋，雷暴，风，火，音乐..

[qianji201712]

@liuhouer 感谢，我去体验体验

[jaynie]

膜膜 用什么写的呀

[qianji201712]

@jaynie 最基本的 HTML+JS 写的，播放是用的 Html 自带的 audio 组件，很基础的语法，负责的我也不会 - -

[jaynie]

@qianji201712 这是用什么框架写的呀

[qianji201712]

@jaynie 没有用框架，就是最简单的 HTML 语言啊，自己用 JS 处理点击，播放事件就好了

[xabc]

@qianji201712 https://rain.xabcloud.com 给你上到 CDN 了 😄

[zz25]

@qianji201712 收藏了，希望以后能多加点样式啊，啥的进去 嘿嘿

[YYSWDD]

嗯，四高一

[wfd0807]

感觉还阔以，但是还需要自备空气加湿器和小区喷泉里的水，来弥补下雨时空气中气味

[qianji201712]

@zz25 好的，准备再美化美化 UI，增加一些音乐进去

[qianji201712]

@wfd0807 来个下雨的效果，视觉听觉两开花 :-)

[CasualYours]

可以，很喜欢

[nanlou]

效果超棒！

[qianji201712]

@nanlou 喜欢就好，再提点建议啊

[pandameng]

安卓 chrome 听了一段时间 雨声偶尔出现卡顿断流状态

[wesleyweatherly]

真好听 很喜欢，谢谢

[zz25]

@qianji201712 老哥，太棒了! 你搞得我一个初学者萌新都有一股劲去弄一个了 嘿嘿

[pynix]

kiss the rain

[amosbird]

@wfd0807 这思路可以啊，我去搞一个

[linsage186]

喜欢 谢谢

[zhou00]

很好听，楼主可以考虑下把背景图换成一个动态的剪短视频，类似手机 app 打开时显示的那样。

[qianji201712]

@zhou00 好的，准备把背景稍微美化一下，不过总体应该还是会保持极简风格的，可以考虑做成一个下雨的效果

[qianji201712]

@pynix 哈哈，加音乐的时候我也纠结过是否应该放 Kiss The Rain

[hitmanx]

一些我收藏的让人安静的适合工作时听的网易云音乐歌单（拿名字在 APP 里搜索就能找到）
1. 催眠纯雨声 无音乐
2. 重度失眠歌单
3. sleepy pillow-嗜睡软枕
4. 冰岛新古典 与你私奔到世界尽头
5. 教程 | 不客观新古典入门指南
6. 极简主义钢琴作曲-Ludovico Einaudi
7. 后极简主义催眠_SLEEP
8. 深度睡眠 重度失眠者专用歌单

[skt041959]

不考虑支持一下 PWA 么？

[qianji201712]

@hitmanx 感谢大佬！我先收藏下，回头专门整理一份出来，不过有些可能存在版权问题

[qianji201712]

@skt041959 作为只会写最简单 HTML 的我，并不会 - -

[Saber299]

感谢

[cowap]

是很好听！有 mp3 吗

[Aloehuang]

@cowap 查看网页源代码，然后找到雨声资源，钢琴声资源，浏览器单独访问就好啦，我已经下载下来了

[Crossin]

静坐听雨

[qianji201712]

@Crossin 所以叫厅雨，独坐厅堂，静听细雨 😏

[cowap]

@Aloehuang 我是想说合在一起的，不是单个

[alexmy]

收藏一个，自己也想撸一个。 @qianji201712

[strugglexiang]

不喜欢

[jiaotang]

博主我要扒站

[miniwade514]

为什么 http://xxoojoke.com/ 跳到了 news.baidu.com ?
阿里云是真快啊，用海外主机卡到不想折腾

[miniwade514]

写错了，是 www 跳了

[qianji201712]

@miniwade514 故意的，把没用的请求都扔出去😏😏😏

[qianji201712]

@jiaotang 准了😏

[qianji201712]

@strugglexiang why ？

[Tokin]

希望加入琴声忽大忽小的功能。。。

[wwek]

棒棒的 收藏了

[okjb]

真几把好听，收藏了

[OutOfMemery]

分享朋友圈了

[jiaotang]

https://asoftmurmur.com/
我想仿着这个来一个，有要一起的吗

[nimrc]

开源吗

[qianji201712]

@nimrc 暂时不哦

[qianji201712]

@Tokin 这个得看具体的钢琴啊，强行忽大忽小，反倒会破坏音乐的流畅性

[ruida]

喜欢 最喜欢写论文的时候把雨声当白噪声

[PUBLIUS]

这个雨声的音频文件可以分享下吗

[kimibob]

很好听！下载是两个单独文件，怎么合在一起听，难道开两个播放器。。

[niwer]

超级喜欢！

[sunocean]

mac 的话推荐 app yu 很棒

[MiracleGoogle]

厅雨？听雨？

[justin2018]

@sunocean mac 这个软件我没有搜索到 老铁 能给个链接不

[godgc]

十分 nice~~ 楼主 我也要扒站~~

[claysec]

@agdhole 收藏了收藏了

[VENTDOUX]

好听 收藏了

[lestat]

好喜欢

[qianji201712]

@lestat 多提点意见啊

[qianji201712]

@godgc 扒吧，回头开源了

[starship]

白噪音工具收集
https://meta.appinn.com/t/topic/88

[13662439966]

你的这个可以循环播放吗？