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

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

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

    网站地址 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  
    ❮ ❯
    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
    放松音乐推荐:
    歌单: https://open.spotify.com/user/chilledcow/playlist/6eHO8aX6lHu3e6bem8r2rq?si=vja_wWSNQDGpuBA64MZXlw
    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
    www.rainymood.com
    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
    https://music.163.com/song?id=32070215
    雨声好像是这个
    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
    白噪音工具收集
    https://meta.appinn.com/t/topic/88
    13662439966
        100
    13662439966  
       2019-03-29 00:37:42 +08:00
    你的这个可以循环播放吗？
    1  2  3  
    ❮ ❯
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2048 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 00:21 · PVG 08:21 · LAX 16:21 · JFK 19:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.