我用cursor做了一款沉浸式桌面美化应用,白噪音，轻音乐，静动态壁纸，小工具组件一站式解决

Music Wallpaper：我用cursor做的沉浸式桌面美化应用

不知道大家喜不喜欢在工作或午休的时候听一些白噪音，我个人是比较喜欢听的。但是我发现市面上的白噪音网站设计很丑，白噪音也很单调，甚至有些吵。所以我就在听白噪音的时候放些轻音乐，后面午休又需要一个闹钟而且那些白噪音网站界面很差劲，每次定闹钟找音乐换壁纸，但是感觉很不方便，于是，我决定自己动手开发一款这样的应用，这就是 Music Wallpaper 。

一、项目初衷

就是做一个可以播放白噪音，定制轻音乐的小组件壁纸网站，将这些一站化解决。在线体验地址：musicwallpaper[1]

二、功能设计

（一）壁纸引擎

壁纸引擎

• 支持视频和图片 ：为了让用户有更多的选择，我决定让 Music Wallpaper 同时支持动态壁纸（视频）和静态壁纸（图片）。这样，用户可以根据自己的喜好和需求，选择充满活力的动态视频壁纸，或者简约美观的静态图片壁纸。

• 壁纸画廊 ：我设计了一个丰富的壁纸画廊，将所有可用壁纸按照类别进行展示。用户可以在这里快速浏览和选择自己喜欢的壁纸样式，方便快捷。

• 平滑切换效果 ：为了避免壁纸更换时的视觉突兀，我为壁纸切换添加了平滑的过渡效果。这样，每次更换壁纸时，用户都能感受到自然流畅的视觉体验。

（二）音乐播放器

音乐播放器

• 现代化三栏式布局 ：为了让用户操作更加直观，我采用了现代化的三栏式布局：左侧是曲库，中间是播放列表，右侧是播放器控件。这种布局不仅美观，还非常实用，用户可以轻松管理自己的音乐库。

• 完整播放功能 ：我为音乐播放器添加了完整的播放功能，包括播放 / 暂停、上 / 下一首、进度条调节和音量控制等。这样，用户可以根据自己的需求随时调整音乐的播放状态，享受个性化的音乐体验。

• 多种播放模式 ：为了满足用户在不同场景下的需求，我添加了顺序播放、单曲循环和随机播放等多种播放模式。无论是专注工作时的单曲循环，还是休闲娱乐时的随机播放，都能轻松实现。

• 动态加载音乐库 ：为了让用户能够方便地更新自己的音乐库，我设计了动态加载功能。用户只需将音乐文件放入指定目录，应用启动时会自动扫描并加载这些资源，无需手动导入。

（三）白噪音

白噪音/音频控制

• 侧边栏音频面板 ：为了让用户在工作或学习时能够更好地放松，我添加了白噪音功能。用户可以在侧边栏的音频面板中播放多种环境音轨，如下雨声、篝火声等，营造出舒适的氛围。

•  独立音量控制 ：为了让用户能够根据自己的喜好调节音量，我为每个音轨都添加了独立的音量控制功能。用户可以根据自己的需求，调整不同音轨的音量大小，实现个性化的音频体验。

• 便捷交互 ：为了让操作更加简单，我采用了 “拖动即播放” 的交互方式。用户只需轻轻拖动音轨即可开始播放，无需复杂的设置，非常方便。

（四）桌面小组件

桌面小组件

•  可拖拽的时钟和倒计时器等 ：为了让用户能够更方便地管理时间，我添加了可拖拽的时钟和倒计时器等小组件。用户可以根据自己的需求将这些小组件放置在桌面的任意位置，并且倒计时器支持自定义时长和结束提示音，非常实用。

三、技术实现

（一）技术栈

• 前端框架 ：我选择了 React[2]，因为它强大的组件化功能和高效的渲染性能，非常适合开发复杂的用户界面。

•  构建工具 ：使用了 Vite[3]，它提供了快速的开发体验和高效的构建速度，让开发过程更加流畅。

• 语言 ：采用 TypeScript[4]，它在 JavaScript 的基础上增加了类型系统，让代码更加健壮，同时也提供了更好的开发工具支持。

（二）克隆到本地

1. 环境准备 ：首先，我安装了 Node.js[5] 和 pnpm[6]，这是开发过程中必不可少的工具。

2. 克隆仓库 ：我将项目代码克隆到本地，然后进入项目目录。

   git clone <https://github.com/wangzaiwang-hub/we-music-wallpaper>
   cd music-wallpaper

3.  安装依赖 ：使用 pnpm 安装项目依赖，确保所有必要的库和工具都已准备就绪。

   pnpm install

4.  启动开发服务器 ：运行开发服务器，开始本地开发。

   pnpm run dev

5.  访问应用 ：在浏览器中访问 http://localhost:5173，即可看到 Music Wallpaper 的运行效果。

四、自定义媒体

为了让用户能够轻松添加自己的壁纸和音乐文件，我设计了简单的文件夹结构。用户只需将文件放入指定目录，应用启动时会自动扫描并加载这些资源。

• 静态壁纸 ：将 .jpg、.png、.webp 等格式的图片文件放入 public/wallpapers/static/ 目录。

• 动态壁纸 ：将 .mp4、.webm 等格式的视频文件放入 public/wallpapers/dynamic/ 目录。

• 音乐 ：将 .mp3、.wav、.ogg 等格式的音频文件放入 public/music/ 目录。文件名将被用作歌曲名称。

• 白噪音 ：将环境音效文件（如风声、雨声）放入 public/audio/ 目录。

• 倒计时提示音 ：替换 public/alarm/alarm.mp3 文件为用户自己的提示音。

五、总结

Music Wallpaper 是我开发的一款桌面美化应用，它不仅结合了动态壁纸、音乐播放和白噪音功能，还提供了现代化的用户界面和流畅的交互体验。我希望通过这款应用，让用户能够享受到更加沉浸式的桌面体验，无论是在工作、学习还是休闲时，都能感受到愉悦的视听享受。如果你也想尝试这款应用，欢迎访问 Music Wallpaper[7] 进行体验。

引用链接

[1] musicwallpaper:https://musicwallpaper.wctw.fun/
[2]React:https://react.dev/
[3]Vite:https://vitejs.dev/
[4]TypeScript:https://www.typescriptlang.org/
[5]Node.js:https://nodejs.org/en
[6]pnpm:https://pnpm.io/installation