首页 注册 登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
qianji201712
V2EX  ›  程序员

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

  •  8      
  •   qianji201712 ·
    litang0908 · 2019-03-28 15:50:33 +08:00 · 23986 次点击
    这是一个创建于 2085 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

    第 1 条附言  ·  2019-03-29 10:17:29 +08:00

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

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

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

    第 2 条附言  ·  2019-03-30 17:27:34 +08:00
    再补充一下：
    刚刚更新了一下小站，增加了停止播放时的声音逐渐变小效果。
    有好几个朋友问我这个小站怎么建的，其实做 Web 开发的大佬们都知道，这种功能简单的网站，分分钟就撸出来了。
    用的都是最基本的 HTML 语法和 JS，播放音乐控件是 HTML 自带的 <audio> 标签，唯一需要处理的就是点击按钮进行播放 /暂停，以及暂停时的声音逐渐变小处理。
    这个小站几乎用不了什么配置，服务器是阿里云的（ 2 核 4G ），就是一个静态网页而已，我是做 Android 开发的，Web 端开发能力只停留在 Google+Copy 阶段。
    只希望这个小站可以给大家带来帮助~
  • 雨声
  • 钢琴
  • 听
  • leaves
    231 条回复  •  2020-10-18 23:11:09 +08:00
    1  2  3  
    ❮ ❯
    SuperMild
        101
    SuperMild  
       2019-03-29 01:02:06 +08:00
    非常完美
    Veigar
        102
    Veigar  
       2019-03-29 01:06:55 +08:00
    写代码 我还是喜欢搭配 咚词哒词的音乐，能提高键盘敲击速度 比如说 http://www.djhik.com
    conge
        103
    conge  
       2019-03-29 01:57:28 +08:00   ❤️ 5
    我听雨声不行
    总感觉是锅上煎着什么东西，听着饿
    ericgui
        104
    ericgui  
       2019-03-29 03:51:33 +08:00
    前段时间由于工作关系，每天很焦虑，晚上经常失眠，就听这个助眠，欢迎大家体验。


    终极助眠方式还是不工作；
    herozzm
        105
    herozzm  
       2019-03-29 07:28:49 +08:00 via iPhone
    直接提供音乐下其实更合适啊
    这种没有必要用网页
    hiyouli
        106
    hiyouli  
       2019-03-29 08:28:43 +08:00
    好了，收藏此贴。这里有各种雨声。哈哈哈。感谢楼主。
    ThomasZ
        107
    ThomasZ  
       2019-03-29 08:45:15 +08:00 via Android
    尝试一下篝火➕小雨➕微风的组合
    RealGM
        108
    RealGM  
       2019-03-29 08:50:14 +08:00
    关键是 5 分钟就撸出来了
    bobyang
        109
    bobyang  
       2019-03-29 08:54:45 +08:00 via Android
    还真是很好听，谢谢
    artSYM
        110
    artSYM  
       2019-03-29 08:57:29 +08:00
    美美哒。
    wolfie
        111
    wolfie  
       2019-03-29 08:57:33 +08:00
    忧伤的画面感。
    Aliceiyi
        112
    Aliceiyi  
       2019-03-29 08:59:31 +08:00
    @conge 哈哈哈
    samaxu
        113
    samaxu  
       2019-03-29 09:04:30 +08:00
    楼主是开发 钱迹 的嘛 我给个好评
    sarlanori
        114
    sarlanori  
       2019-03-29 09:06:30 +08:00
    雨声和钢琴确实最配，当年第一次听到《雨的印记》时真的被惊到了
    blurh11E27
        115
    blurh11E27  
       2019-03-29 09:08:34 +08:00
    哇 不错
    Cyron
        116
    Cyron  
       2019-03-29 09:08:54 +08:00   ❤️ 1
    一直听这首
    https://music.163.com/song?id=5268323
    DanielGuo
        117
    DanielGuo  
       2019-03-29 09:16:37 +08:00
    可真是个小天才呢
    e5c4p3r
        118
    e5c4p3r  
       2019-03-29 09:16:48 +08:00 via iPhone
    感谢分享，很好听
    qianji201712
        119
    qianji201712  
    OP
       2019-03-29 09:17:19 +08:00 via Android
    @conge 秀儿，你先坐下🤔
    qianji201712
        120
    qianji201712  
    OP
       2019-03-29 09:18:08 +08:00 via Android
    @herozzm 其实主要是我白天在公司写代码使用
    qianji201712
        121
    qianji201712  
    OP
       2019-03-29 09:18:26 +08:00 via Android
    @hiyouli 哈哈，等我再拓展拓展
    qianji201712
        122
    qianji201712  
    OP
       2019-03-29 09:18:46 +08:00 via Android
    @samaxu 是的哦，多谢大佬🤗
    qianji201712
        123
    qianji201712  
    OP
       2019-03-29 09:19:12 +08:00 via Android
    @sarlanori 是啊，我听了好久之后，发现这两个搭配太完美了
    qianji201712
        124
    qianji201712  
    OP
       2019-03-29 09:19:24 +08:00 via Android
    @Cyron 感谢，收藏了
    qianji201712
        125
    qianji201712  
    OP
       2019-03-29 09:19:40 +08:00 via Android
    @e5c4p3r 等我继续优化一下
    qianji201712
        126
    qianji201712  
    OP
       2019-03-29 09:21:31 +08:00 via Android
    @13662439966 可以的，就是循环播放的
    zjsxwc
        127
    zjsxwc  
       2019-03-29 09:21:50 +08:00
    感谢楼主，我把楼主的代码用 hbuilder 打包成安卓 app 省流量，

    http://zjsxwc.github.io/play_rain/playrain_0329091541.apk
    2h4dl
        128
    2h4dl  
       2019-03-29 09:25:17 +08:00
    听雨声会让人感到平静，尤其是燥热的夏天。
    lazydog
        129
    lazydog  
       2019-03-29 09:27:11 +08:00 via Android
    很不错，喜欢
    rocyhua
        130
    rocyhua  
       2019-03-29 09:29:08 +08:00
    很不错的小站，已收录，谢谢 LZ 分享。
    https://www.kunlunqiu.com/91.html
    creanme
        131
    creanme  
       2019-03-29 09:33:56 +08:00
    我把这音乐分享到百度盘了
    链接: https://pan.baidu.com/s/1NtWsUcV1f0NADcCaU1rXPw 提取码: h27j
    dingyaguang117
        132
    dingyaguang117  
       2019-03-29 09:35:50 +08:00
    我也借楼 宣传下自己的产品 https://chrome.google.com/webstore/detail/clarity/opjbphlikplllhehiaafnglngompagni
    BarZu
        133
    BarZu  
       2019-03-29 09:39:49 +08:00
    收藏了收藏了
    zatoichi
        134
    zatoichi  
       2019-03-29 09:41:04 +08:00
    言叶之庭的钢琴曲应该很配
    iblessyou
        135
    iblessyou  
       2019-03-29 09:41:09 +08:00
    各种环境音效 https://asoftmurmur.com/
    我记得以前有个网站，画面是一张夕阳海浪的大壁纸，放海浪声，还有雨声什么的 总共好像 4 个页面 刚找找不到了
    blue0125
        136
    blue0125  
       2019-03-29 09:43:23 +08:00
    建议 钢琴声>雨声。。。
    想象成 外面小雨，人在钢琴房 coding 的赶脚。。
    feelinglucky
        137
    feelinglucky  
       2019-03-29 09:58:33 +08:00
    素材可以从里找到 https://github.com/feelinglucky/Rainville，我都已经分轨分好了。
    wslzs1999
        138
    wslzs1999  
       2019-03-29 10:02:40 +08:00
    我也想撸一个,请楼主指导一下
    Mithrandir
        139
    Mithrandir  
       2019-03-29 10:03:38 +08:00
    点击暂停之后最好有一个 fade out 的过程
    qianji201712
        140
    qianji201712  
    OP
       2019-03-29 10:09:01 +08:00
    @Mithrandir 收到，再優化一下！
    qianji201712
        141
    qianji201712  
    OP
       2019-03-29 10:09:20 +08:00
    @wslzs1999 用 HTML 的 audio 控件播放音樂就可以啊
    qianji201712
        142
    qianji201712  
    OP
       2019-03-29 10:11:32 +08:00
    @feelinglucky 多謝，你這個項目不维护了吗？
    qianji201712
        143
    qianji201712  
    OP
       2019-03-29 10:13:12 +08:00
    @creanme https://music.163.com/#/song?id=17746129 网易云音乐链接
    wslzs1999
        144
    wslzs1999  
       2019-03-29 10:30:16 +08:00
    @jiaotang 怎么联系
    wslzs1999
        145
    wslzs1999  
       2019-03-29 10:30:54 +08:00
    @zjsxwc 怎么打包成 app
    zhaoyafei
        146
    zhaoyafei  
       2019-03-29 10:33:46 +08:00
    @iblessyou 你提到的应该是这个站吧 http://rainyscope.com 我经常听
    另外还有一个比较好的 http://virtocean.com/
    exvipplus
        147
    exvipplus  
       2019-03-29 10:34:28 +08:00
    很喜欢，就是这域名。。。
    Mazexal
        148
    Mazexal  
       2019-03-29 10:40:17 +08:00
    杭州这边天天下雨, 听雨声都烦死了
    as94boy
        149
    as94boy  
       2019-03-29 10:44:49 +08:00
    感谢楼主，昨天做一个小功能出偏差了，到今天都沉浸在自我怀疑内心难受的感觉中，听了雨声感觉心情平复了点。
    cooljs
        150
    cooljs  
       2019-03-29 10:58:41 +08:00
    五分钟？
    allenx
        151
    allenx  
       2019-03-29 11:10:28 +08:00
    到后面就光听见钢琴声没听到雨声了。。。
    qianji201712
        152
    qianji201712  
    OP
       2019-03-29 11:17:35 +08:00
    @allenx 好的，可能是那个雨声还没有缓存下来，那个雨声 34 分钟，20M 左右
    qianji201712
        153
    qianji201712  
    OP
       2019-03-29 11:17:56 +08:00
    @as94boy 多谢喜欢啊，我也是烦躁就听
    lwd219
        154
    lwd219  
       2019-03-29 11:23:45 +08:00
    @blue0125 是不是罗辑在北欧的那个别墅？旁边的壁炉里火焰正旺，周围方圆十几里一个人荒芜人烟
    zarte
        155
    zarte  
       2019-03-29 11:27:53 +08:00
    会听腻
    xiaolanger
        156
    xiaolanger  
       2019-03-29 11:39:14 +08:00
    @conge #103 我本来还没什么感觉。。。过分了啊
    RubyJack
        157
    RubyJack  
       2019-03-29 11:54:06 +08:00
    noizio 了解一下
    Aloehuang
        158
    Aloehuang  
       2019-03-29 12:25:50 +08:00 via Android
    @cowap 自己合成吧
    DAM
        159
    DAM  
       2019-03-29 12:37:59 +08:00 via iPhone
    一个听风就是雨的网站 😏
    arens
        160
    arens  
       2019-03-29 12:40:33 +08:00
    这个雨声有点燥，和钢琴不是很搭
    itqls
        161
    itqls  
       2019-03-29 12:46:16 +08:00
    去年听过一个雨声白噪，雨淅淅沥沥的打窗、屋檐，然后还有远处的雷声，找了好久没有找到类似的
    bofei
        162
    bofei  
       2019-03-29 13:05:32 +08:00
    一直比较喜欢下雨
    不管是睡觉还是学习 听着外面的雨声 心中比较”宁静“
    可惜 北京 长时间没有雨季
    atonku
        163
    atonku  
       2019-03-29 13:24:32 +08:00
    还是喜欢猴哥！
    qianji201712
        164
    qianji201712  
    OP
       2019-03-29 14:18:18 +08:00
    @arens 屋外聒噪，屋内安静，自成一片天地
    popvlovs
        165
    popvlovs  
       2019-03-29 15:13:50 +08:00
    收藏了，比较喜欢把雨声调的比较小
    ostholz
        166
    ostholz  
       2019-03-29 15:48:44 +08:00
    停不下来
    QAQGan
        167
    QAQGan  
       2019-03-29 18:08:28 +08:00
    xxoo 还行 手动滑稽
    Aloehuang
        168
    Aloehuang  
       2019-03-29 18:41:37 +08:00
    未经楼主同意，私下下载了雨声和钢琴声两个音频，合成了一个音频，分享给有需要的 V2er。
    链接： https://pan.baidu.com/s/1WN8yRuYaloL_UMQcOV7XrA
    提取码：il1z
    文件约 47.1MB
    Heanes
        169
    Heanes  
       2019-03-29 19:27:35 +08:00
    不错不错
    Heanes
        170
    Heanes  
       2019-03-29 19:31:03 +08:00
    楼主这个域名主站(xxoojoke.com)的 f.u_ck off，非常棒
    qianji201712
        171
    qianji201712  
    OP
       2019-03-29 20:15:16 +08:00 via Android
    @Aloehuang 优秀！🤔
    qianji201712
        172
    qianji201712  
    OP
       2019-03-29 20:16:28 +08:00 via Android
    @Heanes 因为之前做过一个搞笑段子类的 Aop，就注册了这个🤗🤗🤗
    huruwo
        173
    huruwo  
       2019-03-29 20:32:22 +08:00
    郭德纲相声精选 就是笑出声引起同事注意
    Marsss
        174
    Marsss  
       2019-03-29 21:40:23 +08:00
    简单即美好
    cnzzz
        175
    cnzzz  
       2019-03-29 21:48:25 +08:00
    https://asoftmurmur.com/
    sobigfish
        176
    sobigfish  
       2019-03-29 22:02:56 +08:00
    有意思，两个音频合在一起放的概念很有趣
    ruihe
        177
    ruihe  
       2019-03-29 22:07:01 +08:00
    强烈推荐这个 https://at-home.ambient-mixer.com ，不仅有各种自然环境声，还有各种场景，影视剧等的背景音，我觉得氛围还不错
    https://i.loli.net/2019/03/29/5c9e25aa7242d.png
    hyyou2010
        178
    hyyou2010  
       2019-03-29 22:31:24 +08:00
    觉得很棒！
    xabc
        179
    xabc  
       2019-03-29 22:57:19 +08:00
    @qianji201712 看看 https://rain.xabcloud.com 配色如何 😄
    feelinglucky
        180
    feelinglucky  
       2019-03-29 23:51:30 +08:00
    @qianji201712 精力有限而且技术栈用得比较老，所以不维护了。
    intmax2147483647
        181
    intmax2147483647  
       2019-03-30 01:05:07 +08:00
    @arens 你不说我还没感觉出来
    intmax2147483647
        182
    intmax2147483647  
       2019-03-30 01:14:47 +08:00
    @xabc 既然你一定要我原谅你，那么我就原谅你吧，这个颜色太。。。。
    Trumeet
        183
    Trumeet  
       2019-03-30 04:01:32 +08:00
    忧伤的画面感 +1
    Trumeet
        184
    Trumeet  
       2019-03-30 04:05:16 +08:00
    提个建议，增加一个暂停的时候音乐淡出效果，类似网易云。直接停止真的很难受
    6260628
        185
    6260628  
       2019-03-30 04:53:14 +08:00
    听了会更冷了...
    qianji201712
        186
    qianji201712  
    OP
       2019-03-30 07:43:36 +08:00 via Android
    @Trumeet 好的，今天就改进一下
    qianji201712
        187
    qianji201712  
    OP
       2019-03-30 07:45:43 +08:00 via Android
    @DAM 要的就是这效果啊
    dai875939260
        188
    dai875939260  
       2019-03-30 10:27:51 +08:00
    感谢楼主，我把这个写到谷歌浏览器的扩展( https://github.com/daihy8759/nanguo)里去了
    qianji201712
        189
    qianji201712  
    OP
       2019-03-30 12:06:32 +08:00
    @dai875939260 欢迎啊
    Arizas
        190
    Arizas  
       2019-03-30 12:40:18 +08:00
    好听
    shm7
        191
    shm7  
       2019-03-30 14:15:23 +08:00 via iPhone
    不错。我觉得这个可以给 潮汐 提一个意见了
    hyyou2010
        192
    hyyou2010  
       2019-03-30 14:27:16 +08:00
    昨晚开了一晚上，挺不错
    dontcrys
        193
    dontcrys  
       2019-03-30 15:02:03 +08:00
    我最喜欢的雨声 《 Dreamstorm 》 — Dan Gibson
    qianji201712
        194
    qianji201712  
    OP
       2019-03-30 16:12:23 +08:00
    @shm7 其实我想做它的竞品 ==，不太喜欢潮汐，太臃肿了 :)
    qianji201712
        195
    qianji201712  
    OP
       2019-03-30 16:12:36 +08:00
    @dontcrys 多谢，收藏了
    qianji201712
        196
    qianji201712  
    OP
       2019-03-30 16:13:02 +08:00
    @hyyou2010 我现在基本上只要写代码都听它
    qianji201712
        197
    qianji201712  
    OP
       2019-03-30 17:29:12 +08:00
    @Trumeet 刚刚加了这个效果，不知道体验感觉如何？
    Jeeco
        198
    Jeeco  
       2019-03-30 22:08:30 +08:00
    @sobigfish ASMR 你听过么
    sobigfish
        199
    sobigfish  
       2019-03-30 22:11:11 +08:00
    @Jeeco #196 听过，貌似只在某直播上了解过😂
    Trumeet
        200
    Trumeet  
       2019-03-31 01:39:02 +08:00
    @qianji201712 多谢，效果很棒！
    1  2  3  
    ❮ ❯
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4411 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 48ms · UTC 03:57 · PVG 11:57 · LAX 19:57 · JFK 22:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.