V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
qianji201712
V2EX  ›  程序员

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

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

    网站地址 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
    @qianji201712 https://rain.xabcloud.com 给你上到 CDN 了 😄
    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
    不喜欢
    jiaotang
        72
    jiaotang  
       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
    分享朋友圈了
    jiaotang
        82
    jiaotang  
       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   ·   我们的愿景   ·   实用小工具   ·   1030 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 22:22 · PVG 06:22 · LAX 15:22 · JFK 18:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.