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

[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 阶段。
只希望这个小站可以给大家带来帮助~

[SuperMild]

非常完美

[Veigar]

写代码 我还是喜欢搭配 咚词哒词的音乐，能提高键盘敲击速度 比如说 http://www.djhik.com

[conge]

我听雨声不行
总感觉是锅上煎着什么东西，听着饿

[ericgui]

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


终极助眠方式还是不工作；

[herozzm]

直接提供音乐下其实更合适啊
这种没有必要用网页

[hiyouli]

好了，收藏此贴。这里有各种雨声。哈哈哈。感谢楼主。

[ThomasZ]

尝试一下篝火➕小雨➕微风的组合

[RealGM]

关键是 5 分钟就撸出来了

[bobyang]

还真是很好听，谢谢

[artSYM]

美美哒。

[wolfie]

忧伤的画面感。

[Aliceiyi]

@conge 哈哈哈

[samaxu]

楼主是开发 钱迹 的嘛 我给个好评

[sarlanori]

雨声和钢琴确实最配，当年第一次听到《雨的印记》时真的被惊到了

[blurh11E27]

哇 不错

[Cyron]

一直听这首
https://music.163.com/song?id=5268323

[DanielGuo]

可真是个小天才呢

[e5c4p3r]

感谢分享，很好听

[qianji201712]

@conge 秀儿，你先坐下🤔

[qianji201712]

@herozzm 其实主要是我白天在公司写代码使用

[qianji201712]

@hiyouli 哈哈，等我再拓展拓展

[qianji201712]

@samaxu 是的哦，多谢大佬🤗

[qianji201712]

@sarlanori 是啊，我听了好久之后，发现这两个搭配太完美了

[qianji201712]

@Cyron 感谢，收藏了

[qianji201712]

@e5c4p3r 等我继续优化一下

[qianji201712]

@13662439966 可以的，就是循环播放的

[zjsxwc]

感谢楼主，我把楼主的代码用 hbuilder 打包成安卓 app 省流量，

http://zjsxwc.github.io/play_rain/playrain_0329091541.apk

[2h4dl]

听雨声会让人感到平静，尤其是燥热的夏天。

[lazydog]

很不错，喜欢

[rocyhua]

很不错的小站，已收录，谢谢 LZ 分享。
https://www.kunlunqiu.com/91.html

[creanme]

我把这音乐分享到百度盘了
链接: https://pan.baidu.com/s/1NtWsUcV1f0NADcCaU1rXPw 提取码: h27j

[dingyaguang117]

我也借楼 宣传下自己的产品 https://chrome.google.com/webstore/detail/clarity/opjbphlikplllhehiaafnglngompagni

[BarZu]

收藏了收藏了

[zatoichi]

言叶之庭的钢琴曲应该很配

[iblessyou]

各种环境音效 https://asoftmurmur.com/
我记得以前有个网站，画面是一张夕阳海浪的大壁纸，放海浪声，还有雨声什么的 总共好像 4 个页面 刚找找不到了

[blue0125]

建议 钢琴声>雨声。。。
想象成 外面小雨，人在钢琴房 coding 的赶脚。。

[feelinglucky]

素材可以从里找到 https://github.com/feelinglucky/Rainville，我都已经分轨分好了。

[wslzs1999]

我也想撸一个,请楼主指导一下

[Mithrandir]

点击暂停之后最好有一个 fade out 的过程

[qianji201712]

@Mithrandir 收到，再優化一下！

[qianji201712]

@wslzs1999 用 HTML 的 audio 控件播放音樂就可以啊

[qianji201712]

@feelinglucky 多謝，你這個項目不维护了吗？

[qianji201712]

@creanme https://music.163.com/#/song?id=17746129 网易云音乐链接

[wslzs1999]

@jiaotang 怎么联系

[wslzs1999]

@zjsxwc 怎么打包成 app

[zhaoyafei]

@iblessyou 你提到的应该是这个站吧 http://rainyscope.com 我经常听
另外还有一个比较好的 http://virtocean.com/

[exvipplus]

很喜欢，就是这域名。。。

[Mazexal]

杭州这边天天下雨, 听雨声都烦死了

[as94boy]

感谢楼主，昨天做一个小功能出偏差了，到今天都沉浸在自我怀疑内心难受的感觉中，听了雨声感觉心情平复了点。

[cooljs]

五分钟？

[allenx]

到后面就光听见钢琴声没听到雨声了。。。

[qianji201712]

@allenx 好的，可能是那个雨声还没有缓存下来，那个雨声 34 分钟，20M 左右

[qianji201712]

@as94boy 多谢喜欢啊，我也是烦躁就听

[lwd219]

@blue0125 是不是罗辑在北欧的那个别墅？旁边的壁炉里火焰正旺，周围方圆十几里一个人荒芜人烟

[zarte]

会听腻

[xiaolanger]

@conge #103 我本来还没什么感觉。。。过分了啊

[RubyJack]

noizio 了解一下

[Aloehuang]

@cowap 自己合成吧

[DAM]

一个听风就是雨的网站 😏

[arens]

这个雨声有点燥，和钢琴不是很搭

[itqls]

去年听过一个雨声白噪，雨淅淅沥沥的打窗、屋檐，然后还有远处的雷声，找了好久没有找到类似的

[bofei]

一直比较喜欢下雨
不管是睡觉还是学习 听着外面的雨声 心中比较”宁静“
可惜 北京 长时间没有雨季

[atonku]

还是喜欢猴哥！

[qianji201712]

@arens 屋外聒噪，屋内安静，自成一片天地

[popvlovs]

收藏了，比较喜欢把雨声调的比较小

[ostholz]

停不下来

[QAQGan]

xxoo 还行 手动滑稽

[Aloehuang]

未经楼主同意，私下下载了雨声和钢琴声两个音频，合成了一个音频，分享给有需要的 V2er。
链接： https://pan.baidu.com/s/1WN8yRuYaloL_UMQcOV7XrA
提取码：il1z
文件约 47.1MB

[Heanes]

不错不错

[Heanes]

楼主这个域名主站(xxoojoke.com)的 f.u_ck off，非常棒

[qianji201712]

@Aloehuang 优秀！🤔

[qianji201712]

@Heanes 因为之前做过一个搞笑段子类的 Aop，就注册了这个🤗🤗🤗

[huruwo]

郭德纲相声精选 就是笑出声引起同事注意

[Marsss]

简单即美好

[cnzzz]

https://asoftmurmur.com/

[sobigfish]

有意思，两个音频合在一起放的概念很有趣

[ruihe]

强烈推荐这个 https://at-home.ambient-mixer.com ，不仅有各种自然环境声，还有各种场景，影视剧等的背景音，我觉得氛围还不错
https://i.loli.net/2019/03/29/5c9e25aa7242d.png

[hyyou2010]

觉得很棒！

[xabc]

@qianji201712 看看 https://rain.xabcloud.com 配色如何 😄

[feelinglucky]

@qianji201712 精力有限而且技术栈用得比较老，所以不维护了。

[intmax2147483647]

@arens 你不说我还没感觉出来

[intmax2147483647]

@xabc 既然你一定要我原谅你，那么我就原谅你吧，这个颜色太。。。。

[Trumeet]

忧伤的画面感 +1

[Trumeet]

提个建议，增加一个暂停的时候音乐淡出效果，类似网易云。直接停止真的很难受

[6260628]

听了会更冷了...

[qianji201712]

@Trumeet 好的，今天就改进一下

[qianji201712]

@DAM 要的就是这效果啊

[dai875939260]

感谢楼主，我把这个写到谷歌浏览器的扩展( https://github.com/daihy8759/nanguo)里去了

[qianji201712]

@dai875939260 欢迎啊

[Arizas]

好听

[shm7]

不错。我觉得这个可以给 潮汐 提一个意见了

[hyyou2010]

昨晚开了一晚上，挺不错

[dontcrys]

我最喜欢的雨声 《 Dreamstorm 》 — Dan Gibson

[qianji201712]

@shm7 其实我想做它的竞品 ==，不太喜欢潮汐，太臃肿了 :)

[qianji201712]

@dontcrys 多谢，收藏了

[qianji201712]

@hyyou2010 我现在基本上只要写代码都听它

[qianji201712]

@Trumeet 刚刚加了这个效果，不知道体验感觉如何？

[Jeeco]

@sobigfish ASMR 你听过么

[sobigfish]

@Jeeco #196 听过，貌似只在某直播上了解过😂

[Trumeet]

@qianji201712 多谢，效果很棒！