五分钟撸了一个写代码听雨声的小站 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
qianji201712
V2EX    程序员

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

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

    网站地址 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 阶段。
    只希望这个小站可以给大家带来帮助~
    231 条回复    2020-10-18 23:11:09 +08:00
    1  2  3  
    jinksw
        1
    jinksw  
       2019-03-28 15:55:37 +08:00   7
    真好听 很喜欢,谢谢
    maninfog
        2
    maninfog  
       2019-03-28 15:57:17 +08:00 via iPhone
    mac 蓝牙老是出问题,直接放弃上班,难受
    qianji201712
        3
    qianji201712  
    OP
       2019-03-28 15:59:41 +08:00
    @jinksw 目前的音乐我感觉最舒服,如果后期发现其他的音乐,我考虑加一个自定义的功能
    denonw
        4
    denonw  
       2019-03-28 16:00:19 +08:00
    还挺好用,希望能加一个自定义音乐的功能。
    qianji201712
        5
    qianji201712  
    OP
       2019-03-28 16:00:31 +08:00
    @maninfog 你缺一个好的耳机 hahhhh
    qianji201712
        6
    qianji201712  
    OP
       2019-03-28 16:00:52 +08:00
    @denonw 详细描述一下呢?比如怎么自定义之类的
    maninfog
        7
    maninfog  
       2019-03-28 16:01:44 +08:00 via iPhone
    @qianji201712 不是耳机呀,是 mac 蓝牙容易受干扰,还有就是蓝牙时好时坏
    keysona
        8
    keysona  
       2019-03-28 16:02:42 +08:00
    试了下,感觉不错,就是网址让我有点出戏。

    xxoojoke....
    rafa
        9
    rafa  
       2019-03-28 16:04:17 +08:00
    确实很棒,赞一个
    holyghost
        10
    holyghost  
       2019-03-28 16:04:28 +08:00
    老哥域名砸手里了吧。。。
    qianji201712
        11
    qianji201712  
    OP
       2019-03-28 16:05:37 +08:00
    @keysona = = 这个域名是几年前买的,哈哈,因为一个段子
    agdhole
        12
    agdhole  
       2019-03-28 16:06:35 +08:00   3
    qianji201712
        13
    qianji201712  
    OP
       2019-03-28 16:07:07 +08:00
    @agdhole 666 收录了,感谢!
    rabbbit
        14
    rabbbit  
       2019-03-28 16:07:50 +08:00
    https://freesound.org/
    找雨声的话上面这个网站有很多,几个小时长的都有.

    我自用的导航里的白噪声也是在这上面找的 https://aaron-bird.github.io/Lactuca/
    gzlock
        15
    gzlock  
       2019-03-28 16:08:14 +08:00
    希望楼主可以获取到授权再“收录”
    0Zed
        16
    0Zed  
       2019-03-28 16:08:15 +08:00
    感谢分享
    xiangyuecn
        17
    xiangyuecn  
       2019-03-28 16:10:50 +08:00   1
    agdhole
        19
    agdhole  
       2019-03-28 16:10:58 +08:00
    @qianji201712 y2b 可以搜搜 lofi hip hop,都是这种类型的音乐
    qianji201712
        20
    qianji201712  
    OP
       2019-03-28 16:14:59 +08:00
    @gzlock 多谢提醒,主要这个音乐我看到处都有,各大音乐站点都免费的,其实我也没找到可以授权的地方
    qianji201712
        21
    qianji201712  
    OP
       2019-03-28 16:15:22 +08:00
    @rabbbit 多谢!先收录下来
    husky
        22
    husky  
       2019-03-28 16:22:29 +08:00
    grimpil
        23
    grimpil  
       2019-03-28 16:24:39 +08:00 via Android
    @xiangyuecn
    rainymood 这个网站有十来年了吧
    zz25
        24
    zz25  
       2019-03-28 16:26:22 +08:00
    不错啊 老哥,收藏了!
    在家的时候特别在窗户看外面下雨
    特别是外面下雨的时候,在家里睡觉听着雨声睡觉,整个人都感觉好放松好舒服
    qianji201712
        25
    qianji201712  
    OP
       2019-03-28 16:29:41 +08:00
    @grimpil 这个网站很早了,之前我也听过,很不错的
    qianji201712
        26
    qianji201712  
    OP
       2019-03-28 16:29:54 +08:00
    @zz25 欢迎体验啊 :)
    heart4lor
        27
    heart4lor  
       2019-03-28 16:38:09 +08:00
    很棒啊 雨声很合适 之前在各种白噪音 APP 上找的雨声都很吵杂 这个很棒 希望能加入暂停 /播放时声音渐变功能
    Lombard
        28
    Lombard  
       2019-03-28 16:38:30 +08:00
    推荐一个 app,小睡眠,啥声音都有,还能混合播放。
    fuxinya
        29
    fuxinya  
       2019-03-28 16:41:21 +08:00
    @agdhole #12 我擦嘞,还能插入视频,火星,长见识了
    TwoDogSon
        30
    TwoDogSon  
       2019-03-28 16:44:17 +08:00
    @agdhole 老哥好评! 我也经常听他 偶尔会说话
    qianji201712
        31
    qianji201712  
    OP
       2019-03-28 16:46:11 +08:00
    @husky 不是哦,不过你这个也很舒服啊,收藏了,感谢!
    qianji201712
        32
    qianji201712  
    OP
       2019-03-28 16:46:50 +08:00
    @Lombard 用过一阵子,发现太多了,有些乱,而且我主要是上班时听,打开网页比较舒服哈
    qianji201712
        33
    qianji201712  
    OP
       2019-03-28 16:47:07 +08:00
    @TwoDogSon 欢迎体验啊
    qianji201712
        34
    qianji201712  
    OP
       2019-03-28 16:47:26 +08:00
    @heart4lor 多谢反馈,我先记下来
    ontheway1215
        35
    ontheway1215  
       2019-03-28 16:48:26 +08:00
    不错
    liuhouer
        36
    liuhouer  
       2019-03-28 16:49:43 +08:00 via iPhone
    TaoMix app,可以自己选哪些大自然的声音。球滚动到哪,就响哪个声音。鸟,动物,雨水,海洋,雷暴,风,火,音乐..
    qianji201712
        37
    qianji201712  
    OP
       2019-03-28 16:50:22 +08:00
    @liuhouer 感谢,我去体验体验
    jaynie
        38
    jaynie  
       2019-03-28 16:51:23 +08:00
    膜膜 用什么写的呀
    qianji201712
        39
    qianji201712  
    OP
       2019-03-28 16:56:21 +08:00
    @jaynie 最基本的 HTML+JS 写的,播放是用的 Html 自带的 audio 组件,很基础的语法,负责的我也不会 - -
    jaynie
        40
    jaynie  
       2019-03-28 16:56:25 +08:00
    @qianji201712 这是用什么框架写的呀
    qianji201712
        41
    qianji201712  
    OP
       2019-03-28 16:58:04 +08:00
    @jaynie 没有用框架,就是最简单的 HTML 语言啊,自己用 JS 处理点击,播放事件就好了
    xabc
        42
    xabc  
       2019-03-28 17:30:10 +08:00
    zz25
        43
    zz25  
       2019-03-28 17:30:14 +08:00
    @qianji201712 收藏了,希望以后能多加点样式啊,啥的进去 嘿嘿
    YYSWDD
        44
    YYSWDD  
       2019-03-28 17:34:18 +08:00
    嗯,四高一
    wfd0807
        45
    wfd0807  
       2019-03-28 17:35:52 +08:00   2
    感觉还阔以,但是还需要自备空气加湿器和小区喷泉里的水,来弥补下雨时空气中气味
    qianji201712
        46
    qianji201712  
    OP
       2019-03-28 17:41:00 +08:00
    @zz25 好的,准备再美化美化 UI,增加一些音乐进去
    qianji201712
        47
    qianji201712  
    OP
       2019-03-28 17:41:32 +08:00
    @wfd0807 来个下雨的效果,视觉听觉两开花 :-)
    CasualYours
        48
    CasualYours  
       2019-03-28 17:41:42 +08:00
    可以,很喜欢
    nanlou
        49
    nanlou  
       2019-03-28 17:41:50 +08:00
    效果超棒!
    qianji201712
        50
    qianji201712  
    OP
       2019-03-28 17:42:15 +08:00
    @nanlou 喜欢就好,再提点建议啊
    pandameng
        51
    pandameng  
       2019-03-28 17:50:10 +08:00 via Android
    安卓 chrome 听了一段时间 雨声偶尔出现卡顿断流状态
    wesleyweatherly
        52
    wesleyweatherly  
       2019-03-28 17:59:34 +08:00
    真好听 很喜欢,谢谢
    zz25
        53
    zz25  
       2019-03-28 18:20:04 +08:00
    @qianji201712 老哥,太棒了! 你搞得我一个初学者萌新都有一股劲去弄一个了 嘿嘿
    pynix
        54
    pynix  
       2019-03-28 18:23:53 +08:00
    kiss the rain
    amosbird
        55
    amosbird  
       2019-03-28 18:27:47 +08:00
    @wfd0807 这思路可以啊,我去搞一个
    linsage186
        56
    linsage186  
       2019-03-28 18:32:28 +08:00
    喜欢 谢谢
    zhou00
        57
    zhou00  
       2019-03-28 18:37:12 +08:00
    很好听,楼主可以考虑下把背景图换成一个动态的剪短视频,类似手机 app 打开时显示的那样。
    qianji201712
        58
    qianji201712  
    OP
       2019-03-28 18:39:32 +08:00
    @zhou00 好的,准备把背景稍微美化一下,不过总体应该还是会保持极简风格的,可以考虑做成一个下雨的效果
    qianji201712
        59
    qianji201712  
    OP
       2019-03-28 18:40:10 +08:00
    @pynix 哈哈,加音乐的时候我也纠结过是否应该放 Kiss The Rain
    hitmanx
        60
    hitmanx  
       2019-03-28 18:43:18 +08:00
    一些我收藏的让人安静的适合工作时听的网易云音乐歌单(拿名字在 APP 里搜索就能找到)
    1. 催眠纯雨声 无音乐
    2. 重度失眠歌单
    3. sleepy pillow-嗜睡软枕
    4. 冰岛新古典 与你私奔到世界尽头
    5. 教程 | 不客观新古典入门指南
    6. 极简主义钢琴作曲-Ludovico Einaudi
    7. 后极简主义催眠_SLEEP
    8. 深度睡眠 重度失眠者专用歌单
    skt041959
        61
    skt041959  
       2019-03-28 18:44:09 +08:00
    不考虑支持一下 PWA 么?
    qianji201712
        62
    qianji201712  
    OP
       2019-03-28 18:48:57 +08:00
    @hitmanx 感谢大佬!我先收藏下,回头专门整理一份出来,不过有些可能存在版权问题
    qianji201712
        63
    qianji201712  
    OP
       2019-03-28 18:49:17 +08:00
    @skt041959 作为只会写最简单 HTML 的我,并不会 - -
    Saber299
        64
    Saber299  
       2019-03-28 18:51:08 +08:00 via iPhone
    感谢
    cowap
        65
    cowap  
       2019-03-28 19:00:20 +08:00 via iPhone
    是很好听!有 mp3 吗
    Aloehuang
        66
    Aloehuang  
       2019-03-28 19:09:15 +08:00
    @cowap 查看网页源代码,然后找到雨声资源,钢琴声资源,浏览器单独访问就好啦,我已经下载下来了
    Crossin
        67
    Crossin  
       2019-03-28 19:37:33 +08:00
    静坐听雨
    qianji201712
        68
    qianji201712  
    OP
       2019-03-28 19:59:24 +08:00 via Android
    @Crossin 所以叫厅雨,独坐厅堂,静听细雨
    cowap
        69
    cowap  
       2019-03-28 20:01:54 +08:00 via iPhone
    @Aloehuang 我是想说合在一起的,不是单个
    alexmy
        70
    alexmy  
       2019-03-28 20:19:02 +08:00
    收藏一个,自己也想撸一个。 @qianji201712
    strugglexiang
        71
    strugglexiang  
       2019-03-28 20:22:10 +08:00 via Android
    不喜欢
    3H62xFA8MqQOK8D6
        72
    3H62xFA8MqQOK8D6  
       2019-03-28 20:24:50 +08:00
    博主我要扒站
    miniwade514
        73
    miniwade514  
       2019-03-28 20:30:17 +08:00
    为什么 http://xxoojoke.com/ 跳到了 news.baidu.com ?
    阿里云是真快啊,用海外主机卡到不想折腾
    miniwade514
        74
    miniwade514  
       2019-03-28 20:31:42 +08:00
    写错了,是 www 跳了
    qianji201712
        75
    qianji201712  
    OP
       2019-03-28 20:41:47 +08:00 via Android
    @miniwade514 故意的,把没用的请求都扔出去
    qianji201712
        76
    qianji201712  
    OP
       2019-03-28 20:42:09 +08:00 via Android
    @jiaotang 准了
    qianji201712
        77
    qianji201712  
    OP
       2019-03-28 20:42:16 +08:00 via Android
    @strugglexiang why ?
    Tokin
        78
    Tokin  
       2019-03-28 20:44:23 +08:00
    希望加入琴声忽大忽小的功能。。。
    wwek
        79
    wwek  
       2019-03-28 21:08:19 +08:00
    棒棒的 收藏了
    okjb
        80
    okjb  
       2019-03-28 21:16:38 +08:00   1
    真几把好听,收藏了
    OutOfMemery
        81
    OutOfMemery  
       2019-03-28 21:35:53 +08:00
    分享朋友圈了
    3H62xFA8MqQOK8D6
        82
    3H62xFA8MqQOK8D6  
       2019-03-28 21:39:30 +08:00
    https://asoftmurmur.com/
    我想仿着这个来一个,有要一起的吗
    nimrc
        83
    nimrc  
       2019-03-28 21:41:42 +08:00 via iPhone
    开源吗
    qianji201712
        84
    qianji201712  
    OP
       2019-03-28 21:49:59 +08:00 via Android
    @nimrc 暂时不哦
    qianji201712
        85
    qianji201712  
    OP
       2019-03-28 21:50:31 +08:00 via Android
    @Tokin 这个得看具体的钢琴啊,强行忽大忽小,反倒会破坏音乐的流畅性
    ruida
        86
    ruida  
       2019-03-28 21:56:50 +08:00 via Android
    喜欢 最喜欢写论文的时候把雨声当白噪声
    PUBLIUS
        87
    PUBLIUS  
       2019-03-28 22:30:48 +08:00
    这个雨声的音频文件可以分享下吗
    kimibob
        88
    kimibob  
       2019-03-28 22:33:19 +08:00
    很好听!下载是两个单独文件,怎么合在一起听,难道开两个播放器。。
    niwer
        89
    niwer  
       2019-03-28 22:40:29 +08:00
    超级喜欢!
    sunocean
        90
    sunocean  
       2019-03-28 22:43:50 +08:00 via iPhone
    mac 的话推荐 app yu 很棒
    MiracleGoogle
        91
    MiracleGoogle  
       2019-03-28 22:48:36 +08:00
    厅雨?听雨?
    justin2018
        92
    justin2018  
       2019-03-28 23:07:13 +08:00
    @sunocean mac 这个软件我没有搜索到 老铁 能给个链接不
    godgc
        93
    godgc  
       2019-03-28 23:16:48 +08:00
    十分 nice~~ 楼主 我也要扒站~~
    claysec
        94
    claysec  
       2019-03-28 23:35:39 +08:00
    @agdhole 收藏了收藏了
    VENTDOUX
        95
    VENTDOUX  
       2019-03-28 23:43:26 +08:00
    好听 收藏了
    lestat
        96
    lestat  
       2019-03-29 00:01:23 +08:00 via Android
    好喜欢
    qianji201712
        97
    qianji201712  
    OP
       2019-03-29 00:32:09 +08:00 via Android
    @lestat 多提点意见啊
    qianji201712
        98
    qianji201712  
    OP
       2019-03-29 00:32:22 +08:00 via Android
    @godgc 扒吧,回头开源了
    starship
        99
    starship  
       2019-03-29 00:35:20 +08:00
    13662439966
        100
    13662439966  
       2019-03-29 00:37:42 +08:00
    你的这个可以循环播放吗?
    1  2  3  
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     4238 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 37ms UTC 05:33 PVG 13:33 LAX 21:33 JFK 00:33
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86