AriesMusic Free Music

又一个高颜值音乐播放器！基于 Electron + Vue3 打造的跨平台桌面听歌神器 AriesMusic

一款界面精致、功能齐全的开源桌面音乐播放器，支持在线播放、桌面歌词、逐字歌词、黑胶唱片界面、本地音乐、音乐下载、多音源解析，全平台通吃 Windows / macOS / Linux。

🔗 GitHub 地址：https://github.com/AriesChenL/AriesMusicPlayer ------ 觉得好用点个 ⭐ Star 支持一下！

前言

市面上的音乐播放器要么广告满天飞，要么灰色歌曲一堆放不了，要么界面丑得让人没有打开的欲望。作为一个既想好好听歌、又对 UI 有点强迫症的开发者，我基于 Electron + Vue3 打磨了这样一个桌面音乐播放器 ------ AriesMusic。

它主打三个字：好看、好用、全平台。下面带你逐个功能过一遍，文末有一键上手教程。

一、先看颜值：界面长什么样

整体采用深色主题 + 毛玻璃质感，播放器、歌单、搜索、设置各个页面都做了统一的圆角与配色规范，没有那种拼凑感。

几个视觉亮点：

黑胶唱片播放界面 ：播放时唱片旋转、唱臂落下，暂停自动定格，满满的仪式感。 $在此插入截图：黑胶唱片播放页$
全屏 / 桌面歌词 ：支持单行、双行、滚动三种模式，双行还有分组淡出动画。 $在此插入截图：桌面歌词效果$
移动端自适应：不只是桌面，窄窗口下会自动切换到移动端布局，平板模式也做了适配。

二、核心功能一览

🎵 在线播放 + 多音源解析

支持在线搜索、播放海量曲库，内置多音源解析策略，遇到某个源失效会自动尝试其他音源，尽量保证歌曲能正常播放。

🎤 桌面歌词 & 逐字歌词

独立的桌面歌词窗口，可拖动、可调透明度
支持逐字歌词（karaoke 式高亮），跟着节奏一个字一个字亮起
支持歌词翻译开关、繁体转换

在此插入截图：逐字歌词高亮效果

💿 本地音乐

一键扫描本地音乐文件夹，自动解析 ID3 标签、专辑封面，本地歌曲和在线歌曲统一管理，断网也能听。

⬇️ 音乐下载

支持下载喜欢的歌曲到本地，可配置下载目录，支持无损音质。

🔍 强大的搜索

搜索结果按单曲 / 歌单 / 歌手 / 专辑分 Tab 展示，找歌更精准。

🔄 自动更新

内置基于 electron-updater 的自动更新系统，新版本发布后应用内即可检查并升级，不用每次手动去下载。

⌨️ 全局快捷键 & 系统集成

全局快捷键控制播放 / 暂停 / 切歌
系统媒体控制中心集成（macOS 的 Now Playing、Linux 的 MPRIS）
托盘歌词显示

三、技术栈：这播放器是怎么搭起来的

对同样想做 Electron 桌面应用的同学，这套技术选型可以直接参考：

层	技术
桌面框架	Electron
前端框架	Vue 3 （Composition API + `<script setup>`）
语言	TypeScript 全量
构建工具	electron-vite（Vite 驱动，热更新飞快）
状态管理	Pinia
打包分发	electron-builder（多平台多架构一键出包）

架构上的几个设计点

1. 主进程 / 渲染进程职责分离

播放核心状态放在渲染进程的 Pinia store，主进程负责系统集成（托盘、媒体控制、自动更新、日志），通过 IPC 通信，边界清晰。

2. 独立的音频服务层

把 HTMLAudioElement 的操作、EQ、AudioContext、MediaSession 全部封装进一个 audioService，对上层暴露事件（play / pause / end / seek / url_expired 等），组件只管监听事件、不直接碰音频元素，逻辑解耦。

3. 播放稳定性打磨

播放器最怕的就是"卡死""转圈圈"。我在音源加载失败的处理上做了熔断机制------同一首歌连续解析失败超过阈值就停止重试并提示用户，避免无意义的后台空转。类似的健壮性细节还有不少，这也是它用起来"不闹心"的原因。

4. 可配置的日志系统

内置结构化日志（JSONL 格式），记录播放行为与错误，支持配置存储位置和保留天数，方便排查问题------对一个要长期维护的项目来说，这很关键。

四、快速上手

直接下载安装包（推荐普通用户）

前往 Releases 页面下载对应平台的安装包：

Windows ：AriesMusic-x.x.x-win-x64.exe
macOS ：AriesMusic-x.x.x-mac-arm64.dmg（Apple 芯片）/ mac-x64.dmg（Intel）
Linux ：AppImage / deb

从源码运行（开发者）

bash 复制代码

# 克隆项目
git clone https://github.com/AriesChenL/AriesMusicPlayer.git
cd AriesMusicPlayer

# 安装依赖
npm install

# 启动开发模式
npm run dev

# 打包当前平台
npm run build:mac    # macOS
npm run build:win    # Windows
npm run build:linux  # Linux

Node 版本建议 20+，其余开箱即用。

五、开源协议 & 致敬

本项目在开源项目 AlgerMusicPlayer（MIT 协议）的基础上二次开发，感谢原作者的优秀工作。本项目同样遵循 MIT 协议，欢迎自由使用、学习、二次开发。

注：本项目仅供学习交流使用，请支持正版音乐。

结语

如果你也在找一个颜值在线、功能齐全、还没广告的桌面音乐播放器，或者你正想学习 Electron + Vue3 桌面应用的实战写法，欢迎来试试 AriesMusic。

🔗 项目地址：https://github.com/AriesChenL/AriesMusicPlayer

觉得不错的话，点个 ⭐ Star 是对作者最大的鼓励！有问题或建议也欢迎提 Issue / PR，一起把它打磨得更好 💪

本文首发于 CSDN，转载请注明出处。