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

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

  •  8
     
  •   qianji201712 ·
    litang0908 · Mar 28, 2019 · 26757 views
    This topic created in 2628 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  
    qianji201712
        201
    qianji201712  
    OP
       Mar 31, 2019 via Android
    @huruwo 确定不会分心吗?😀
    qianji201712
        202
    qianji201712  
    OP
       Mar 31, 2019 via Android
    @sobigfish 嗯,目前是两个音频在一起播放的
    AII
        203
    AII  
       Mar 31, 2019 via iPhone
    可以,收藏了
    FreshUncle
        204
    FreshUncle  
       Apr 1, 2019
    好像手机端不能同时播放,还是我手机问题
    qianji201712
        205
    qianji201712  
    OP
       Apr 1, 2019
    @FreshUncle iPhone? 好像有兼容问题,我改改
    twamix
        206
    twamix  
       Apr 1, 2019
    @qianji201712 我帮你加了点功能,每次刷新页面会有不同的钢琴和不同的雨声搭配

    <script>
    const host = "http://baidu.com/";
    const rain = document.getElementById('player_rain');
    const music = document.getElementById('player_music');
    const playBtn = document.getElementById('btnPlay');
    let platFirst = true;
    var rainarray = ["rain/Birds_Early_Morning.mp3","rain/Rain_Totoro_ADForest.mp3","rain/SayamauMl_Rain_1.mp3","rain/therain.m4a","rain/Toropical_Rain.mp3"];
    var musicarray = ["music/Across_the_Fields.mp3","music/EndIess_Pain.mp3","music/feng.mp3","music/In_Autumn_the_Leaves_Came_to_Our_House.mp3","music/yuzhou.mp3"];
    function playAudio() {
    if (rain.paused) {
    if (platFirst) {
    const sourceRain = document.getElementById("player_rain_source");
    sourceRain.src = host + rainarray[Math.floor(Math.random()*5)];
    setVolume(0.6, 1);
    rain.load();

    const sourceMusic = document.getElementById("player_music_source");
    sourceMusic.src = host + musicarray[Math.floor(Math.random()*5)];
    setVolume(0.5, 2);
    music.load();
    }
    rain.play();
    music.play();
    playBtn.className = "";
    playBtn.className = "pause";
    } else {
    rain.pause();
    music.pause();
    playBtn.className = "";
    playBtn.className = "play";
    }
    platFirst = false;
    }
    function setVolume(volume, target) {
    if (target === 1) {
    rain.volume = volume;
    } else {
    music.volume = volume;
    }
    }
    </script>
    FreshUncle
        207
    FreshUncle  
       Apr 2, 2019   ❤️ 1
    @qianji201712 安卓,另外推荐一个雨声的歌单很好,一直在听 https://music.163.com/#/playlist?id=907602836
    还有海声歌单,林间声音的歌单,都在作者歌单里。
    qianji201712
        208
    qianji201712  
    OP
       Apr 2, 2019
    @FreshUncle 感谢,收藏了
    Everyxin
        209
    Everyxin  
       Apr 2, 2019
    手机上无法调整音量,是我一个吗?
    qianji201712
        210
    qianji201712  
    OP
       Apr 2, 2019
    @Everyxin 爱疯手机吗?
    Everyxin
        211
    Everyxin  
       Apr 2, 2019
    @qianji201712 #210 ios12 iphoneXs
    foskazs
        212
    foskazs  
       Apr 5, 2019 via Android
    哇咋,收藏了。
    foskazs
        213
    foskazs  
       Apr 5, 2019 via Android
    我可以扒下来吗?感觉挺有意思的。
    qianji201712
        214
    qianji201712  
    OP
       Apr 5, 2019
    @foskazs 拔下来做什么呢?
    foskazs
        215
    foskazs  
       Apr 5, 2019 via Android
    @qianji201712 赶紧挺有创意的,无聊就听听。
    chunchun1028
        216
    chunchun1028  
       Apr 9, 2019
    老哥,钢琴声咋没了呢?
    qianji201712
        217
    qianji201712  
    OP
       Apr 9, 2019
    @chunchun1028 已经修复了,是 CDN 没钱了,现在增加了几首音乐,欢迎体验
    zhenufo
        218
    zhenufo  
       Apr 10, 2019
    雨声没了, 老哥
    liuawei
        219
    liuawei  
       Apr 10, 2019
    @qianji201712 老哥没钢琴声 Chrome 浏览器
    mztql
        220
    mztql  
       Apr 10, 2019
    回头看了一下,竟然加密了,可是 sojson 强度不行啊
    qianji201712
        221
    qianji201712  
    OP
       Apr 10, 2019
    @mztql 没事,这个项目本来就是纯给自己写着玩的 :)
    huangdayu
        222
    huangdayu  
       Apr 10, 2019 via Android
    @qianji201712 大兄弟,现在改循环播放了吗?一直在播放……建议加个设置选项
    vrl
        223
    vrl  
       Apr 10, 2019 via Android
    雨声,溪流,和蟋蟀,jiepai.github.io
    cnfczn
        224
    cnfczn  
       Apr 13, 2019
    老哥求音乐循环播放部分的代码,以前也做过一个白噪音的网页.
    考虑循环播放和白噪音文件大小的问题,播放完了就容易出现空白.
    intmax2147483647
        225
    intmax2147483647  
       Jun 10, 2019
    老哥 网站挂了
    qianji201712
        226
    qianji201712  
    OP
       Jun 10, 2019
    @intmax2147483647 多谢,已经修复了,是因为新注册的域名 tingyu.pro 还没有备案,用 rain.xxoojoke.com 重定向过去报错了, rain.xxoojoke.com 是备用域名,等 tingyu.pro 备案过了再切回来
    qianji201712
        227
    qianji201712  
    OP
       Jun 10, 2019
    @vrl 感谢大佬
    intmax2147483647
        228
    intmax2147483647  
       Jun 10, 2019
    @qianji201712 可以的老哥 我是你的忠实用户
    as94boy
        229
    as94boy  
       Jul 23, 2019
    现在有空每天都登上去听一听。
    iiplxx
        230
    iiplxx  
       Aug 19, 2019
    这个如果每次退出再次进入能保留自己设置的两个音效就好了,感觉重新再找一个舒适度有点点麻烦
    wanniwa
        231
    wanniwa  
       Oct 18, 2020
    不维护了吗?我之前经常上去听,今天发现居然打不开了
    1  2  3  
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1128 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 64ms · UTC 23:33 · PVG 07:33 · LAX 16:33 · JFK 19:33
    ♥ Do have faith in what you're doing.