听音乐听小众佳作，开眼界玩有趣小网站。这是“小网站”系列的第 9 篇，关注公众号接收更新，不迷路。

--- 今日介绍 ---

雨声发生器 （Rain Sound）

把玩点：

• 适合减压，帮助你放松;

• 睡不着时可催眠;

• 适合专注工作的背景声;

主观评价：趣味性 3 星，技术性 2.5 星

把玩地址  https://pluvior.com/ 

--- 使用指北 ---

建议收藏，当你失眠时；

建议收藏，当你想专注时；

建议收藏，当时发呆时；

之前介绍过大海“白噪音”、“积极正能量的白噪音”，今天再来一个解失眠的神器：雨声发生器

让我沉迷的并非绵绵细雨，而是功率谱密度频率均匀分布的雨点敲击声响：似细流涓涓、海浪拍岸、风吹树摇造就的属于自然的白噪音。

网站支持电脑与手机打开，手机上因为技术原理不同，需要触摸屏幕后才会有声音。

哗哗的小雨水声，加上真实的水滴沿着玻璃缓缓向下，氛围感直接拉满。右边“倒计时”按钮贴心的准备了倒计时，以免睡过了还在播放，浪费电量。

都有哪些声音呢，左侧按钮从上至下：

• Rain：雨水声
• Roof：雨水落在屋顶声音
• Wind：风声
• Thunderstorm ：雷电风暴
• Cafe：室内咖啡馆声音
• Leaves：风吹树叶声

网站提供白天、黑夜两种情景模式，在顶部可以点击Dark mode与Light mode进行切换，不同的情景模式下声音也会不一样哟！

声音支持多个组合播放，可以分别调大、调小不同声源的音量大小，组合成最佳声音，摆好姿势，好好享受睡上美美的一觉吧！

--- 干货知识 ---

纯技术性干货，非行业人士可忽略本节。

本次介绍的网站，技术实现上相对比较简单：

• 全屏采用的组件jquery.fullPage.min.js实现；

• 背景真实的雨滴效果实现，采用的是开源的rainday.js实现的，基于Canvas绘制，非常的生动逼真，具体互联网上有介绍。

• 声音是由一些mp3文件播放而来，播放的组件也是jquery.jplayer.min.js，老熟人了，操作非常简单,不多赘述。

• 音量控制的滑杆采用simple-slider.js插件，也比较简单。网页、素材图片、字体都是基本操作。页面左下角的计时器用了kkcountdown.js一款网页计时器的插件，之前也都介绍过，不再赘述。

本系列长期更新！首发公众号：土卫六

喜欢的朋友，感谢点赞、分享、收藏三连！