1. 官方客户端劝退之后我决定自己动手做一个网易云音乐官方桌面端这些年越来越臃肿启动慢、弹窗多、后台常驻进程一堆我身边不少做编曲和混音的朋友早就把它从主力机里卸了。但问题是很多独立音乐人的作品首发就在网易云想听自己的歌、看评论、管理歌单还是绕不开它。于是我就想能不能用 AI 编程工具从零撸一个轻量桌面客户端只保留搜索、播放、歌单、评论这几个核心功能界面干净、快捷键顺手、启动秒开。这个想法听起来挺大但真正动手之后我发现借助 Claude Code CLI 这类 AI 编程工具一个不熟悉 Electron 和前端框架的人也能把项目跑起来。我自己的主力语言是 Python 和一点 Go对 TypeScript 和 Vue 只能算看得懂但整个项目从初始化到能播放第一首歌大概只花了两个周末。核心思路很简单把需求拆成小步骤每一步都让 AI 生成可运行的代码然后本地验证、报错、再修。这篇文章我会把完整流程拆开讲项目怎么初始化、API 怎么对接、界面怎么生成、TaoToken 怎么作为统一 Key 通道接进 Claude Code CLI以及本地启动和验证的具体命令。你不需要是前端高手只要会装 Node、会复制命令、能看懂报错信息就能跟着做出来。适合谁适合那些被官方客户端折磨、又想练手 AI 编程的开发者或者想给自己做一个专属音乐播放器的折腾党。先说清楚一件事这个项目是本地运行的个人工具不涉及任何破解或绕过官方限制所有数据都来自公开的 API 接口登录也是走官方扫码流程。我们只是换了一个更顺手的壳。2. TaoToken 前置准备统一 Key 通道接入 Claude Code CLI在开始写代码之前得先把 AI 编程工具接好。我用的是 Claude Code CLI它本身需要配置 API Key 才能调用模型。如果你同时用 Codex CLI、Cline 或者别的工具每个都去单独配 Key 会很乱。TaoToken 在这里的作用就是提供一个统一的 Key 通道一个 Key 可以给多个 AI 编程工具用Base URL 和 Model ID 都统一管理。先注册并拿到 Key。打开官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 注册后在控制台里创建一个 API Key。控制台地址是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite Key 列表在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。创建的时候给它起个名字比如music-client-dev方便后面区分。拿到 Key 之后Claude Code CLI 的配置方式有两种一种是环境变量一种是写配置文件。我推荐用配置文件因为项目多了之后环境变量容易乱。Claude Code CLI 的配置文件默认在~/.claude/settings.json如果没有就手动创建。内容大概长这样{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-你的TaoTokenKey, ANTHROPIC_MODEL: claude-sonnet-4-20250514 } }注意 Base URL 这里写的是https://taotoken.net/api不要加 UTM 参数API 地址就是纯接口地址。Model ID 根据你实际用的模型填TaoToken 的文档页 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里有当前支持的模型列表选一个适合编码的就行。如果你用的是 Codex CLI配置方式类似但文件是~/.codex/auth.json。这个文件里需要写全三件套Base URL、Key、Model ID。格式如下{ base_url: https://taotoken.net/api, api_key: sk-你的TaoTokenKey, model: claude-sonnet-4-20250514 }Cline 或者 CC Switch 这类工具也是在设置里填 Base URL、API Key、Model ID 这三项。Base URL 统一用https://taotoken.net/apiKey 用刚才创建的那个Model ID 按需选。这样不管你换哪个 AI 编程工具都不用重新申请 Key改一下配置文件就行。配置完之后在终端里跑一下claude命令看看能不能正常进入交互界面。如果提示认证失败先检查 Key 有没有复制错、Base URL 有没有多空格。确认没问题后我们就可以开始建项目了。3. 项目初始化与可复制配置从零搭起 Electron Vue 骨架项目初始化这一步我让 Claude Code CLI 直接生成整个目录结构和配置文件。你可以在终端里新建一个文件夹比如netease-desktop然后进入这个目录运行claude进入交互模式把下面的需求描述贴进去帮我初始化一个 Electron Vue 3 Vite 的桌面项目要求支持 TypeScript主进程和渲染进程分开渲染进程用 Vue 3 组合式 API样式用 Tailwind CSS打包用 electron-builder。项目名 netease-desktop入口文件 main.ts预加载脚本 preload.ts。Claude Code CLI 会生成一整套文件包括package.json、vite.config.ts、electron-builder.yml、src/main/main.ts、src/renderer/App.vue等等。生成完之后你需要手动检查几个关键配置确保和 TaoToken 的接入不冲突。首先是package.json里面要有这些依赖和脚本{ name: netease-desktop, version: 0.1.0, main: dist/main/main.js, scripts: { dev: vite, build: vue-tsc --noEmit vite build electron-builder, start: electron . }, devDependencies: { electron: ^30.0.0, electron-builder: ^24.0.0, vite: ^5.0.0, vue: ^3.4.0, typescript: ^5.4.0, tailwindcss: ^3.4.0 } }然后是vite.config.ts要配置好 Electron 的入口和渲染进程的根目录import { defineConfig } from vite import vue from vitejs/plugin-vue import path from path export default defineConfig({ plugins: [vue()], root: path.join(__dirname, src/renderer), base: ./, build: { outDir: path.join(__dirname, dist/renderer), emptyOutDir: true }, server: { port: 5173 } })主进程src/main/main.ts里要创建窗口、加载渲染进程、处理快捷键。这里我让 AI 生成了一个基础版本后面再逐步加功能import { app, BrowserWindow, globalShortcut } from electron import path from path let mainWindow: BrowserWindow | null null function createWindow() { mainWindow new BrowserWindow({ width: 1200, height: 800, webPreferences: { preload: path.join(__dirname, preload.js), contextIsolation: true, nodeIntegration: false } }) if (process.env.NODE_ENV development) { mainWindow.loadURL(http://localhost:5173) } else { mainWindow.loadFile(path.join(__dirname, ../renderer/index.html)) } mainWindow.on(closed, () { mainWindow null }) } app.whenReady().then(() { createWindow() globalShortcut.register(F5, () { mainWindow?.reload() }) }) app.on(window-all-closed, () { if (process.platform ! darwin) app.quit() })这些配置生成完之后运行npm install安装依赖。如果网络慢可以换淘宝镜像。安装完成后跑npm run dev应该能看到一个空白窗口弹出来。这一步成功说明骨架搭好了。接下来是 API 对接。网易云音乐的公开接口有不少我们主要用搜索、歌曲详情、播放地址、歌词、评论这几个。我让 Claude Code CLI 生成了一个src/renderer/api/netease.ts文件封装了请求逻辑const BASE_URL https://music.163.com/api export async function searchSongs(keyword: string, limit 30) { const res await fetch(${BASE_URL}/search/get, { method: POST, headers: { Content-Type: application/x-www-form-urlencoded }, body: new URLSearchParams({ s: keyword, type: 1, limit: String(limit), offset: 0 }) }) return res.json() } export async function getSongUrl(id: number) { const res await fetch(${BASE_URL}/song/enhance/player/url?ids[${id}]br320000) return res.json() }注意这些接口是公开的不需要登录也能用一部分。如果要访问用户歌单和评论需要走扫码登录拿到 cookie 之后带上。登录部分我后面单独讲。界面生成这块我让 AI 直接生成了一个三栏布局左侧是歌单和导航中间是歌曲列表底部是播放控制栏。用 Vue 组件拆成Sidebar.vue、SongList.vue、PlayerBar.vue。样式用 Tailwind 写整体走暗色主题减少视觉干扰。template div classflex h-screen bg-gray-900 text-gray-100 Sidebar classw-64 border-r border-gray-800 / div classflex-1 flex flex-col SongList classflex-1 overflow-y-auto / PlayerBar classh-20 border-t border-gray-800 / /div /div /template到这里项目的基本结构和界面就出来了。你可以跑npm run dev看看效果应该能看到一个暗色的音乐播放器界面虽然还不能播放但布局已经在了。4. 验证请求与成功结果本地跑通搜索、播放和快捷键配置写完最关键的一步是验证。先跑npm run dev然后在搜索框里输入一首歌名比如「晴天」看看能不能返回结果。如果控制台报 CORS 错误说明渲染进程直接请求网易云接口被浏览器拦截了。解决办法是在主进程里做代理或者用 Electron 的session.defaultSession.webRequest修改请求头。我让 Claude Code CLI 在主进程里加了一个简单的代理转发import { ipcMain } from electron import fetch from node-fetch ipcMain.handle(api-request, async (_event, url: string, options: any) { const res await fetch(url, { ...options, headers: { ...options.headers, User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 } }) return res.json() })然后在渲染进程里通过window.electronAPI.apiRequest调用。这样请求就从主进程发出不受 CORS 限制。播放功能需要拿到歌曲的真实 URL。调用getSongUrl之后返回的 JSON 里会有data[0].url把这个 URL 赋给audio标签的src就能播放。我实测下来大部分歌曲都能拿到 320kbps 的地址少数版权受限的会返回 null这时候界面上要给出提示。const audio new Audio() audio.src songUrl audio.play()快捷键这块我在主进程里注册了全局快捷键比如空格播放暂停、F3/F4 切歌、F1/F2 调音量。注意全局快捷键会和其他应用冲突所以只在窗口聚焦时生效比较好。可以用mainWindow.on(focus)和blur来动态注册和注销。mainWindow.on(focus, () { globalShortcut.register(Space, () { mainWindow?.webContents.send(toggle-play) }) }) mainWindow.on(blur, () { globalShortcut.unregisterAll() })验证成功的标志是搜索能出结果、点击歌曲能播放、快捷键能控制播放状态、歌词能滚动显示。我跑通这些之后又让 AI 加了评论树和歌单管理整个项目就完整了。如果你在验证过程中遇到401 Unauthorized说明某些接口需要登录 cookie。扫码登录的实现是在主进程里打开一个隐藏窗口加载网易云登录页监听 cookie 变化拿到MUSIC_U之后存到本地。下次启动时带上这个 cookie 请求即可。5. 本篇常见错排查401、local proxy failed、reading choices 怎么修做这个项目的过程中我踩了不少坑这里把最常见的几个报错和解决办法列出来你遇到的时候可以直接对照。第一个是401 Unauthorized。这个通常出现在调用用户歌单或评论接口时原因是请求里没有带登录 cookie。解决办法是先走扫码登录拿到MUSIC_U这个 cookie然后在请求头里加上Cookie: MUSIC_Uxxx。如果你用的是 TaoToken 的 Key 通道注意区分TaoToken 的 Key 是给 AI 编程工具用的不是给网易云接口用的两者不要混。第二个是local proxy failed。这个报错一般出现在 Claude Code CLI 连接 TaoToken 的时候说明 Base URL 配置错了。检查~/.claude/settings.json里的ANTHROPIC_BASE_URL是不是https://taotoken.net/api不要写成https://taotoken.net/api/带斜杠也不要在后面加 UTM 参数。如果还是不行用curl https://taotoken.net/api测试一下网络通不通。第三个是reading choices报错。这个通常出现在解析 API 返回的 JSON 时代码期望choices字段但实际返回的是data或result。解决办法是打印完整的返回体看看实际结构是什么。网易云的接口返回格式不统一有的用result.songs有的用data需要针对每个接口单独处理。第四个是 OAuth 相关报错。如果你用 Codex CLI 的auth.json配置报 OAuth 失败检查文件里是不是写全了三件套base_url、api_key、model。缺任何一个都会导致认证流程走不通。另外注意auth.json的权限在 Linux/macOS 下要设成600否则可能被拒绝读取。第五个是 Electron 打包后白屏。这个一般是vite.config.ts里的base没设成./导致打包后的资源路径不对。改成base: ./重新打包即可。第六个是快捷键不生效。检查是不是被其他应用占用了比如 F5 在浏览器里是刷新在 Electron 里如果没聚焦也可能不触发。用globalShortcut.isRegistered判断一下注册失败就换一个组合键。这些坑我都实际遇到过大部分是配置问题少数是接口返回格式变化。遇到报错不要慌先看控制台完整日志再让 Claude Code CLI 帮你分析通常几分钟就能定位。6. 后续扩展与接入文档把项目跑起来之后还能做什么项目跑通之后你可以继续加功能。比如歌词滚动用audio的timeupdate事件拿到当前播放时间然后匹配歌词数组里的时间戳高亮对应行。评论树可以用递归组件渲染支持展开折叠。歌单管理可以加拖拽排序用vuedraggable库。如果你想让 AI 编程工具持续帮你迭代建议把 TaoToken 的 Coding Plan 用起来地址是 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 。它适合长期编码和 Agent 场景一个 Key 可以覆盖多个工具不用每次换工具都重新配。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里面有各个工具的详细配置步骤。如果你只是想先试试模型对话可以打开 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentchatutm_campaignrewrite 直接体验。API Key 管理在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 建议给每个项目单独建一个 Key方便追踪用量。控制台 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 里能看到调用记录和余额。最后说一个实用技巧把项目的README.md写好记录启动命令、配置路径、常见报错。下次换电脑或者重装系统照着 README 十分钟就能恢复环境。我自己的 README 里就写了三行核心命令npm install、npm run dev、npm run build加上 TaoToken 的配置片段足够用了。