• 请不要在回答技术问题时复制粘贴 AI 生成的内容
qianji201712
V2EX  ›  程序员

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

  •  8
     
  •   qianji201712 ·
    litang0908 · Mar 28, 2019 · 28250 views
    This topic created in 2779 days ago, the information mentioned may be changed or developed.

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

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

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

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

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

    Supplement 1  ·  Mar 29, 2019

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

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

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

    Supplement 2  ·  Mar 30, 2019
    再补充一下:
    刚刚更新了一下小站,增加了停止播放时的声音逐渐变小效果。
    有好几个朋友问我这个小站怎么建的,其实做 Web 开发的大佬们都知道,这种功能简单的网站,分分钟就撸出来了。
    用的都是最基本的 HTML 语法和 JS,播放音乐控件是 HTML 自带的 <audio> 标签,唯一需要处理的就是点击按钮进行播放 /暂停,以及暂停时的声音逐渐变小处理。
    这个小站几乎用不了什么配置,服务器是阿里云的( 2 核 4G ),就是一个静态网页而已,我是做 Android 开发的,Web 端开发能力只停留在 Google+Copy 阶段。
    只希望这个小站可以给大家带来帮助~
    231 replies  •  2020-10-18 23:11:09 +08:00
    1  2  3  
    ❮ ❯
    jinksw
    jinksw
    Mar 28, 2019❤️7
    1
    真好听 很喜欢,谢谢
    maninfog
    maninfog
    Mar 28, 2019 via iPhone
    2
    mac 蓝牙老是出问题,直接放弃上班🎵,难受
    qianji201712
    qianji201712
    OP
    Mar 28, 2019
    3
    @jinksw 目前的音乐我感觉最舒服,如果后期发现其他的音乐,我考虑加一个自定义的功能
    denonw
    denonw
    Mar 28, 2019
    4
    还挺好用,希望能加一个自定义音乐的功能。
    qianji201712
    qianji201712
    OP
    Mar 28, 2019
    5
    @maninfog 你缺一个好的耳机 hahhhh
    qianji201712
    qianji201712
    OP
    Mar 28, 2019
    6
    @denonw 详细描述一下呢?比如怎么自定义之类的
    maninfog
    maninfog
    Mar 28, 2019 via iPhone
    7
    @qianji201712 不是耳机呀,是 mac 蓝牙容易受干扰,还有就是蓝牙时好时坏
    keysona
    keysona
    Mar 28, 2019
    8
    试了下,感觉不错,就是网址让我有点出戏。

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

    我自用的导航里的白噪声也是在这上面找的 https://aaron-bird.github.io/Lactuca/
    gzlock
    gzlock
    Mar 28, 2019
    15
    希望楼主可以获取到授权再“收录”
    0Zed
    0Zed
    Mar 28, 2019
    16
    感谢分享
    xiangyuecn
    xiangyuecn
    Mar 28, 2019❤️1
    17
    agdhole
    agdhole
    Mar 28, 2019
    19
    @qianji201712 y2b 可以搜搜 lofi hip hop,都是这种类型的音乐
    qianji201712
    qianji201712
    OP
    Mar 28, 2019
    20
    @gzlock 多谢提醒,主要这个音乐我看到处都有,各大音乐站点都免费的,其实我也没找到可以授权的地方
    qianji201712
    qianji201712
    OP
    Mar 28, 2019
    21
    @rabbbit 多谢!先收录下来
    husky
    husky
    Mar 28, 2019
    22
    grimpil
    grimpil
    Mar 28, 2019 via Android
    23
    @xiangyuecn
    rainymood 这个网站有十来年了吧
    zz25
    zz25
    Mar 28, 2019
    24
    不错啊 老哥,收藏了!
    在家的时候特别在窗户看外面下雨
    特别是外面下雨的时候,在家里睡觉听着雨声睡觉,整个人都感觉好放松好舒服
    qianji201712
    qianji201712
    OP
    Mar 28, 2019
    25
    @grimpil 这个网站很早了,之前我也听过,很不错的
    qianji201712
    qianji201712
    OP
    Mar 28, 2019
    26
    @zz25 欢迎体验啊 :)
    heart4lor
    heart4lor
    Mar 28, 2019
    27
    很棒啊 雨声很合适 之前在各种白噪音 APP 上找的雨声都很吵杂 这个很棒 希望能加入暂停 /播放时声音渐变功能
    Lombard
    Lombard
    Mar 28, 2019
    28
    推荐一个 app,小睡眠,啥声音都有,还能混合播放。
    fuxinya
    fuxinya
    Mar 28, 2019
    29
    @agdhole #12 我擦嘞,还能插入视频,火星,长见识了
    TwoDogSon
    TwoDogSon
    Mar 28, 2019
    30
    @agdhole 老哥好评! 我也经常听他 偶尔会说话
    qianji201712
    qianji201712
    OP
    Mar 28, 2019
    31
    @husky 不是哦,不过你这个也很舒服啊,收藏了,感谢!
    qianji201712
    qianji201712
    OP
    Mar 28, 2019
    32
    @Lombard 用过一阵子,发现太多了,有些乱,而且我主要是上班时听,打开网页比较舒服哈
    qianji201712
    qianji201712
    OP
    Mar 28, 2019
    33
    @TwoDogSon 欢迎体验啊
    qianji201712
    qianji201712
    OP
    Mar 28, 2019
    34
    @heart4lor 多谢反馈,我先记下来
    ontheway1215
    ontheway1215
    Mar 28, 2019
    35
    不错
    liuhouer
    liuhouer
    Mar 28, 2019 via iPhone
    36
    TaoMix app,可以自己选哪些大自然的声音。球滚动到哪,就响哪个声音。鸟,动物,雨水,海洋,雷暴,风,火,音乐..
    qianji201712
    qianji201712
    OP
    Mar 28, 2019
    37
    @liuhouer 感谢,我去体验体验
    jaynie
    jaynie
    Mar 28, 2019
    38
    膜膜 用什么写的呀
    qianji201712
    qianji201712
    OP
    Mar 28, 2019
    39
    @jaynie 最基本的 HTML+JS 写的,播放是用的 Html 自带的 audio 组件,很基础的语法,负责的我也不会 - -
    jaynie
    jaynie
    Mar 28, 2019
    40
    @qianji201712 这是用什么框架写的呀
    qianji201712
    qianji201712
    OP
    Mar 28, 2019
    41
    @jaynie 没有用框架,就是最简单的 HTML 语言啊,自己用 JS 处理点击,播放事件就好了
    xabc
    xabc
    Mar 28, 2019
    42
    @qianji201712 https://rain.xabcloud.com 给你上到 CDN 了 😄
    zz25
    zz25
    Mar 28, 2019
    43
    @qianji201712 收藏了,希望以后能多加点样式啊,啥的进去 嘿嘿
    YYSWDD
    YYSWDD
    Mar 28, 2019
    44
    嗯,四高一
    wfd0807
    wfd0807
    Mar 28, 2019❤️2
    45
    感觉还阔以,但是还需要自备空气加湿器和小区喷泉里的水,来弥补下雨时空气中气味
    qianji201712
    qianji201712
    OP
    Mar 28, 2019
    46
    @zz25 好的,准备再美化美化 UI,增加一些音乐进去
    qianji201712
    qianji201712
    OP
    Mar 28, 2019
    47
    @wfd0807 来个下雨的效果,视觉听觉两开花 :-)
    CasualYours
    CasualYours
    Mar 28, 2019
    48
    可以,很喜欢
    nanlou
    nanlou
    Mar 28, 2019
    49
    效果超棒!
    qianji201712
    qianji201712
    OP
    Mar 28, 2019
    50
    @nanlou 喜欢就好,再提点建议啊
    pandameng
    pandameng
    Mar 28, 2019 via Android
    51
    安卓 chrome 听了一段时间 雨声偶尔出现卡顿断流状态
    wesleyweatherly
    wesleyweatherly
    Mar 28, 2019
    52
    真好听 很喜欢,谢谢
    zz25
    zz25
    Mar 28, 2019
    53
    @qianji201712 老哥,太棒了! 你搞得我一个初学者萌新都有一股劲去弄一个了 嘿嘿
    pynix
    pynix
    Mar 28, 2019
    54
    kiss the rain
    amosbird
    amosbird
    Mar 28, 2019
    55
    @wfd0807 这思路可以啊,我去搞一个
    linsage186
    linsage186
    Mar 28, 2019
    56
    喜欢 谢谢
    zhou00
    zhou00
    Mar 28, 2019
    57
    很好听,楼主可以考虑下把背景图换成一个动态的剪短视频,类似手机 app 打开时显示的那样。
    qianji201712
    qianji201712
    OP
    Mar 28, 2019
    58
    @zhou00 好的,准备把背景稍微美化一下,不过总体应该还是会保持极简风格的,可以考虑做成一个下雨的效果
    qianji201712
    qianji201712
    OP
    Mar 28, 2019
    59
    @pynix 哈哈,加音乐的时候我也纠结过是否应该放 Kiss The Rain
    hitmanx
    hitmanx
    Mar 28, 2019
    60
    一些我收藏的让人安静的适合工作时听的网易云音乐歌单(拿名字在 APP 里搜索就能找到)
    1. 催眠纯雨声 无音乐
    2. 重度失眠歌单
    3. sleepy pillow-嗜睡软枕
    4. 冰岛新古典 与你私奔到世界尽头
    5. 教程 | 不客观新古典入门指南
    6. 极简主义钢琴作曲-Ludovico Einaudi
    7. 后极简主义催眠_SLEEP
    8. 深度睡眠 重度失眠者专用歌单
    skt041959
    skt041959
    Mar 28, 2019
    61
    不考虑支持一下 PWA 么?
    qianji201712
    qianji201712
    OP
    Mar 28, 2019
    62
    @hitmanx 感谢大佬!我先收藏下,回头专门整理一份出来,不过有些可能存在版权问题
    qianji201712
    qianji201712
    OP
    Mar 28, 2019
    63
    @skt041959 作为只会写最简单 HTML 的我,并不会 - -
    Saber299
    Saber299
    Mar 28, 2019 via iPhone
    64
    感谢
    cowap
    cowap
    Mar 28, 2019 via iPhone
    65
    是很好听!有 mp3 吗
    Aloehuang
    Aloehuang
    Mar 28, 2019
    66
    @cowap 查看网页源代码,然后找到雨声资源,钢琴声资源,浏览器单独访问就好啦,我已经下载下来了
    Crossin
    Crossin
    Mar 28, 2019
    67
    静坐听雨
    qianji201712
    qianji201712
    OP
    Mar 28, 2019 via Android
    68
    @Crossin 所以叫厅雨,独坐厅堂,静听细雨 😏
    cowap
    cowap
    Mar 28, 2019 via iPhone
    69
    @Aloehuang 我是想说合在一起的,不是单个
    alexmy
    alexmy
    Mar 28, 2019
    70
    收藏一个,自己也想撸一个。 @qianji201712
    strugglexiang
    strugglexiang
    Mar 28, 2019 via Android
    71
    不喜欢
    3H62xFA8MqQOK8D6
    3H62xFA8MqQOK8D6
    Mar 28, 2019
    72
    博主我要扒站
    miniwade514
    miniwade514
    Mar 28, 2019
    73
    为什么 http://xxoojoke.com/ 跳到了 news.baidu.com ?
    阿里云是真快啊,用海外主机卡到不想折腾
    miniwade514
    miniwade514
    Mar 28, 2019
    74
    写错了,是 www 跳了
    qianji201712
    qianji201712
    OP
    Mar 28, 2019 via Android
    75
    @miniwade514 故意的,把没用的请求都扔出去😏😏😏
    qianji201712
    qianji201712
    OP
    Mar 28, 2019 via Android
    76
    @jiaotang 准了😏
    qianji201712
    qianji201712
    OP
    Mar 28, 2019 via Android
    77
    @strugglexiang why ?
    Tokin
    Tokin
    Mar 28, 2019
    78
    希望加入琴声忽大忽小的功能。。。
    wwek
    wwek
    Mar 28, 2019
    79
    棒棒的 收藏了
    okjb
    okjb
    Mar 28, 2019❤️1
    80
    真几把好听,收藏了
    OutOfMemery
    OutOfMemery
    Mar 28, 2019
    81
    分享朋友圈了
    3H62xFA8MqQOK8D6
    3H62xFA8MqQOK8D6
    Mar 28, 2019
    82
    https://asoftmurmur.com/
    我想仿着这个来一个,有要一起的吗
    nimrc
    nimrc
    Mar 28, 2019 via iPhone
    83
    开源吗
    qianji201712
    qianji201712
    OP
    Mar 28, 2019 via Android
    84
    @nimrc 暂时不哦
    qianji201712
    qianji201712
    OP
    Mar 28, 2019 via Android
    85
    @Tokin 这个得看具体的钢琴啊,强行忽大忽小,反倒会破坏音乐的流畅性
    ruida
    ruida
    Mar 28, 2019 via Android
    86
    喜欢 最喜欢写论文的时候把雨声当白噪声
    PUBLIUS
    PUBLIUS
    Mar 28, 2019
    87
    这个雨声的音频文件可以分享下吗
    kimibob
    kimibob
    Mar 28, 2019
    88
    很好听!下载是两个单独文件,怎么合在一起听,难道开两个播放器。。
    niwer
    niwer
    Mar 28, 2019
    89
    超级喜欢!
    sunocean
    sunocean
    Mar 28, 2019 via iPhone
    90
    mac 的话推荐 app yu 很棒
    MiracleGoogle
    MiracleGoogle
    Mar 28, 2019
    91
    厅雨?听雨?
    justin2018
    justin2018
    Mar 28, 2019
    92
    @sunocean mac 这个软件我没有搜索到 老铁 能给个链接不
    godgc
    godgc
    Mar 28, 2019
    93
    十分 nice~~ 楼主 我也要扒站~~
    claysec
    claysec
    Mar 28, 2019
    94
    @agdhole 收藏了收藏了
    VENTDOUX
    VENTDOUX
    Mar 28, 2019
    95
    好听 收藏了
    lestat
    lestat
    Mar 29, 2019 via Android
    96
    好喜欢
    qianji201712
    qianji201712
    OP
    Mar 29, 2019 via Android
    97
    @lestat 多提点意见啊
    qianji201712
    qianji201712
    OP
    Mar 29, 2019 via Android
    98
    @godgc 扒吧,回头开源了
    starship
    starship
    Mar 29, 2019
    99
    13662439966
    13662439966
    Mar 29, 2019
    100
    你的这个可以循环播放吗?
    1  2  3  
    ❮ ❯
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1327 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 136ms · UTC 19:50 · PVG 03:50 · LAX 11:50 · JFK 14:50
    ♥ Do have faith in what you're doing.