PROTOTYPE7701
返回作品库
乔木 AI 音乐电台
REACT, VITE, TAILWIND CSS, NODE.JS, DOCKER · 做产品原型
自托管 AI 生成音乐电台,前台播放动效,后台曲库管理。
自托管 AI 生成音乐电台,前台播放动效,后台曲库管理。
AI音乐自托管电台音乐播放器ReactVite
0
复制 copy
0
分享 share
0
点赞 like
可复现三件套
预计 15 分钟前置:Node.js;可选 Docker
APROMPT / 提示词
使用 Cursor 或 Claude Code 从零构建一个自托管 AI 音乐电台应用,包含前台电台(播放队列、歌词、声纹动效)和后台曲库(上传、编辑、发布控制),采用 React + Vite + Tailwind CSS 前端,Node.js + Express 后端,本地文件存储音乐和封面。
BSOURCE / 源码
// 入口片段 src/main.tsx —— 完整源码见仓库 import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; import "./styles.css"; ReactDOM.createRoot(document.getElementById("root")!).render( <React.StrictMode> <App /> </React.StrictMode> );
HOW IT'S MADE / 拆解
01
克隆仓库并安装依赖:`npm install`。
02
设置环境变量 `ADMIN_PASSWORD`,启动服务:`ADMIN_PASSWORD=your-password npm start`。
03
访问 `http://127.0.0.1:3068`,在设置中进入后台,用密码登录,上传音乐后即可在前台电台播放。
Dr.Sharp 点评
Dr. Sharp:用最简洁的架构实现了最真实的痛点解决方案——AI 音乐管理,但若想走出个人服务器,还需要更精致的权限和流式传输优化。
乔木 AI 音乐电台 · vbai.studio/works/qiaomu-music-player-web
复制 prompt 或源码即可在本地复现 · 喜欢就生成带示例图的分享海报