前阵子我突然醒悟用了这么多年流媒体音乐App听歌倒是不愁但每次想找个冷门曲目或者整理自己的歌单不是版权下架就是推荐算法把我带偏。再加上界面越来越臃肿控制栏随处可见的社交入口我这爱折腾的劲儿又上来了为什么不给自己做一个专属音乐平台本来以为会是一个漫长的开发过程结果一个提示词AiPy就给我撸出了一个能用的东西。这个过程让我对AI编程和提示词工程有了非常直观的认识今天把整个经历和踩过的坑都记录一下想自己动手做点小工具的可以参考着来。1. 这个项目是怎么来的一句话触发的想法1.1 我为什么要自己做音乐平台先说个背景。我平时听歌非常杂古典、后摇、老摇滚、电子乐的现场录音什么都听。市面上的主流音乐平台有两大痛一是版权分散这个歌在这个App有那个歌在那个App有为了听一首歌要切好几个软件二是推荐算法越猜越偏我明明只是偶尔听一次口水歌它接下来三天都给我推类似的歌直接把我听歌品味拉低。所以我一直想要一个能完全按自己意志控制的音乐平台不在乎多炫酷只要能把本地曲库整理起来、能按我的逻辑搜索、能干净利落地播放和控制。做这事的技术难度其实不高就是一个标准的Web播放器难的是设计思路和打磨细节。按理说我自己写也行但说实话我最近比较懒正好我在研究提示词工程就想试试看能不能用AI编程工具直接“点单”。所谓AI编程就是把需求描述成一段话让大模型帮你生成代码。很多从传统编程过渡过来的人会觉得这玩意儿不靠谱但实际用完你会发现只要提示词写得好生成一个小工具的效率真不是盖的。1.2 AiPy到底是个什么工具AiPy是我最近在用的一款AI编程助手名字听起来像AI加Python但它不止能生成Python也能干前端、后端、脚本、数据处理这些活儿。我拿它做这个音乐平台主要是因为它支持“对话式生成项目”也就是说你可以直接告诉它“帮我创建一个音乐播放器网页”它会自动帮你把项目结构搭好把前端页面、样式、逻辑都生成出来。你还能像跟同事协作一样继续提要求比如“把列表改成卡片式”“加一个随机播放”它会自动修改代码。我个人的理解AiPy这类工具的本质是“意图到代码”的翻译器。它把自然语言里的功能需求对应到一套默认的实现方案上。这就意味着你给它的信息越精确它翻译出来的代码越贴合你的想法。如果你说“给我做个音乐网站”它可能就生成一个只有标题和空白页的小页面要是你把功能、技术栈、数据结构都写清楚它就能生成一个具备完整交互逻辑的产品雏形。1.3 为什么提示词是整个项目的成败关键很多人以为AI编程就是“写一句话得到全站”那是把AI当许愿池了。实际上AI编程的核心在于理解用户意图而意图的载体就是提示词。提示词写得清楚AI输出的代码基本就能直接用提示词写得模棱两可AI就只能靠猜猜出来的结果大概率要返工。我自己总结过一条“笨道理”AI不懂什么是“高级感”“好看”“流畅”它只懂你描述出来的功能点和约束条件。你说“要好看”它不知道你喜欢什么风格你说“要深色背景、圆角卡片、毛玻璃质感的播放器”它就能把对应CSS属性给你堆出来。所以写提示词本质上是在用逻辑把你的需求翻译成机器能理解的“设计说明书”。这次做音乐平台我第一件事就是花时间打磨提示词内容中包含功能清单、界面风格、技术选型甚至数据结构。这一步做扎实了后面开发几乎是一路顺畅。2. 提示词设计从“随便说说”到“精准指挥”2.1 写提示词之前的准备工作真正动手写提示词前我先把需求列了一个清单这个清单是我觉得可能实现的所有功能点。目的是防止后面聊着聊着漏掉什么。当时我记在备忘录里的大致内容如下歌曲列表展示能看到歌名、歌手、专辑、时长、封面图。搜索与筛选支持按歌名搜索按风格筛选。播放控制播放、暂停、上一首、下一首、进度条、音量控制。模式切换顺序播放、随机播放、单曲循环。当前歌曲信息播放器固定显示正在播放的歌名、歌手、封面。数据来源先内置一个歌曲数组方便后续替换。技术栈纯前端不用框架直接HTML/CSS/JavaScript方便部署。界面风格深色主题简洁包含毛玻璃效果类似主流音乐播放器的感觉。写这个清单的过程中我其实就在做“需求分析”。别小看这一步它决定了你和AI对话的方向。很多人拿到AI就直接开聊聊到一半发现功能实现不了再回头补需求代码已经乱套了。最佳实践是先想清楚自己要什么再去告诉AI而不是让AI帮你想。2.2 我实际使用的提示词完整版本把清单整理成语言后我在AiPy对话框里输入了这样一段提示词请帮我生成一个音乐平台的单页应用要求如下 1. 左侧是一个侧边栏显示平台名称、歌单分类和播放列表按钮。 2. 主区域展示歌曲列表歌曲信息包括封面、歌名、歌手、专辑、时长支持搜索框输入关键字实时过滤歌曲。 3. 底部是一个固定播放条包含上一首、播放暂停、下一首按钮以及进度条、音量控制显示当前歌曲的封面、歌名和歌手。 4. 支持顺序播放、随机播放和单曲循环三种模式切换模式时有图标反馈。 5. 歌曲数据先写死在一个const songs数组里包含至少10首不同风格的歌封面图用在线图片链接。 6. 界面采用深色主题背景为深灰色卡片使用半透明毛玻璃效果播放条固定在底部整体布局不要拥挤。 7. 使用原生HTML、CSS和JavaScript整个项目只包含一个index.html文件即可。 8. 代码注释用中文命名要语义化。这段提示词可能比一些人平时写的长但它每一条都在给AI限定方向。比如第7条指定了单文件这对我后续部署和改动来说非常省事第2条指定了“实时过滤”避免AI只给一个静态列表第5条指定了数据结构和歌曲数量避免AI随便放一条示例数据就交差。我在实际测试中观察到越是具体的约束AI生成的代码就越少出现“意义不明的占位符”。2.3 提示词迭代与微调技巧一次生成的代码基本不可能完全满意我的经验是把它当“初稿”来看。第一次生成完我发现歌曲列表里没有显示封面图片播放条上的进度条也只是一个静态的div。这时候我不需要从头写提示词只需要针对问题追加指令。我在AiPy对话框里继续输入“歌曲封面图片没有显示检查img标签的src字段进度条需要用input range实现这样才能拖动。”它随即做了修改。还有一个常见的误区是生成后发现某个功能实现不了就急着推翻重来。实际上AI编程的调试思路和传统编程一样要一层一层拆。比如“随机播放没效果”就要先想想是算法问题还是播放状态重置问题。你可以把问题直接描述给AiPy它会自己排查代码。但我们自己也最好懂一点前端的运行逻辑不然连问题都描述不清楚那就真变成瞎指挥了。微调技巧上我总结出一个“三明治法”先肯定它做得好的地方再指出具体问题最后给出期望结果。例如“列表已经正常显示了但播放器无法自动加载下一首。希望切歌时调用playSong函数并传入下一首歌曲数据。”这样的指令更接近程序员之间的沟通大模型理解起来也更有效率。3. 实操过程AiPy生成音乐平台全记录3.1 初始化项目让AiPy开始干活按照我的习惯工程类的事情还是要落到命令行。我先建了一个目录然后打开终端在目录里启动AiPy的交互模式。AiPy支持很多种入口我偏向用CLI因为可以边看输出边控制生成流程。启动后我把上面那段提示词粘贴进去回车它就开始生成代码。整个生成过程大概只有几十秒输出是一个单一的index.html文件。这个文件包含了全部CSS、HTML和JavaScript。我当时的第一反应是怎么这么短打开文件一看其实代码量不少只是它把所有内容都压缩到了一个文件里符合我的第7条要求。我在本地直接用浏览器打开了index.html界面就已经能出来了歌曲列表也有但没有图片播放按钮也点不了。这就进入了调试阶段。如果你也是第一次用这类工具我建议不要在生成过程中频繁打断。等它把第一版完整输出后再去整体审阅代码然后批量提修改意见。原因很简单大模型生成代码时有一个“上下文窗口”你中间插入的修改指令会打乱它的生成节奏反而容易出bug。3.2 生成后的项目结构长什么样因为使用了单文件方案最终结构比想象中简单。目录下就是index.html再加上自己准备的一个放歌曲封面的images文件夹。如果后续要扩展成多文件也可以让AiPy拆分成style.css、script.js。但对于我个人本地使用来说单文件有个额外好处可以在任意地方双击打开不需要配服务器环境甚至手机浏览器也能访问。项目结构简单归简单内部功能倒是齐的。我拆开index.html看了一下里面大致分几块CSS部分定义侧边栏、列表区、播放条、卡片样式。HTML部分侧边栏的导航结构、主区域搜索框和歌曲列表容器、底部播放条。JavaScript部分歌曲数组、渲染列表函数、点击播放函数、播放模式切换逻辑、搜索过滤逻辑。如果你打算把这个项目部署到服务器上也完全可以。单文件静态页面放到Nginx或者任意静态托管平台就能跑。我后续就把它挂到了一个闲置的云服务器上用内网访问效果跟本地打开一样。3.3 核心代码解析播放器与列表的实现这里挑几个关键代码片段聊聊不是为了讲前端课而是想说明AI生成的代码逻辑是怎样组织的方便你后续自己改。歌曲数据是用一个数组定义的const songs [ { title: 夜雾, artist: 林间声, album: 城市采样, duration: 3:45, cover: images/1.jpg, src: audio/1.mp3 }, // ... ];渲染列表时用到了createElement和innerHTML拼接。AiPy默认用的是模板字符串拼接HTML这在数据简单的场景下没问题。播放按钮的事件是挂在列表项上的通过data-index索引找到歌曲对象再调用playSong函数。function playSong(index) { currentIndex index; const song songs[index]; audio.src song.src; audio.play(); // 更新播放器信息、封面 }进度条用的是input range元素监听input事件更新当前播放时间监听change事件实现拖拽跳转。这个设计比很多初学者的静态div进度条要合理也说明提示词里“进度条可拖动”这个要求是起作用的。随机播放的实现逻辑是function shufflePlay() { let randomIndex; do { randomIndex Math.floor(Math.random() * songs.length); } while (randomIndex currentIndex); playSong(randomIndex); }虽然简单但完全满足了随机播放的意图。AI生成代码时遇到这种明确指令给出的逻辑往往很直接没什么花架子但可用。3.4 数据准备给平台填上歌曲代码出来以后最现实的问题就是数据从哪来。我本地有很多无损音乐但浏览器播放音频文件需要转码格式直接用wav或者flac容易出兼容问题。我选择全部转成mp3或者m4a放到本地audio目录下。封面图我是用Python脚本批量截取封面生成的生成到images目录。然后把歌曲信息补充到songs数组里。如果你是音乐小白只想体验一下也可以从那些允许免费使用的音乐素材站点下载一些试听曲目或者干脆用网上的免版权音频链接。但注意如果用的是网络链接必须确认它支持跨域播放否则可能出现音频加载失败的问题。这个我在后面问题部分会细说。填数据的时候我踩了一个小坑AiPy生成的songs数组里src字段写的是相对路径但我当时把audio文件夹放在index.html的上一级目录导致找不到文件。这种情况只需要把路径改成正确的相对位置就行。我想说的是AI虽然能生成代码但它并不知道你本地文件摆在哪数据路径这种东西还是得自己把握好。4. 功能打磨让音乐平台真正“专属”4.1 播放列表与随机播放基础功能跑通之后我开始按自己的习惯加东西。第一个加的是“随机播放不打断当前队列”的交互。AiPy初始版本里随机播放会立即切换歌曲我希望它是“下一首才生效”。做法很简单增加一个shuffleEnabled变量播放结束时判断它再决定下一首是随机还是顺序。我让AiPy改代码它很快就把这个逻辑调整好了。第二个优化是播放列表高亮。当前播放的那一行应该有状态标记比如背景变亮、文字变成主题色。原始版本只更新了播放条的信息列表里没有反馈。我追加了一句“给正在播放的列表项添加playing类名”生成后的效果挺好。这种细节看似不重要但实际使用中非常影响体验不然你都不知道现在播的是哪首。4.2 搜索和筛选功能搜索功能的原始版本是监听input事件然后对songs数组做filter再重新渲染列表。这个实现思路没问题但有个体验问题搜索时如果正在播放的歌曲不在结果列表里播放条状态会丢失列表高亮也会消失。我需要改成搜索时保留当前播放歌曲的播放状态只把列表换成匹配结果。查看生成代码后发现它用的是全局songs数组渲染。优化之后我把渲染逻辑改成基于filteredSongs数组然后维护一个currentIndex指向真实歌曲索引。这样搜索过滤时既不影响播放器状态也能从结果列表里继续点歌。如果你也想让搜索功能更顺手提醒一点搜索输入框要加防抖不然每敲一个字就过滤一次歌曲多的时候会很卡。这个优化AiPy也是直接给了代码核心就是用setTimeout延迟触发。4.3 歌词同步显示歌词是音乐播放器的一大经典功能。说实话我没指望AI能一步到位所以需求写的是“支持歌词显示如果没有歌词就显示暂无”。AiPy给出的方案是解析LRC格式文本用时间戳定位当前行歌词。这个实现比我想象中要多半屏代码但它确实能工作。我的用法是把每首歌的歌词存成一个同名文本文件比如夜雾.lrc通过fetch请求获取。如果文件不存在就显示“暂无歌词”。不过要注意fetch请求本地文件时如果直接双击打开index.html浏览器会拦截跨域请求需要起一个本地静态服务器才能加载歌词。这也是我在调试时遇到的一个坑后面会专门说。4.4 界面皮肤与主题切换“专属”这个词不单指功能也包括视觉。AiPy生成的初始界面是深灰色主题搭配半透明毛玻璃效果。我后来想给它换个“黄昏”色调就往CSS里增加了几个变量比如--bg-color、--card-color、--accent-color然后通过点击按钮切换class。生成的代码里已经用了一些变量我就让AiPy把它们提取成设计令牌这样换肤非常方便。如果想进一步个性化可以把封面图模糊后作为背景或者加一个自定义CSS文件的引入入口。但我的建议是别一次性加太多视觉需求优先保证功能稳定界面风格可以在后面慢慢调毕竟AI生成的CSS有时候会因为选择器冲突把布局搞乱改起来比改逻辑还费劲。5. 常见问题与排查技巧实录5.1 音频文件加载失败路径与跨域问题我遇到最多的问题就是音频加载不出来。第一种情况是路径写错了这个简单检查Network面板看请求路径是否正确改相对路径即可。第二种情况是本地打开页面音频文件用file协议加载浏览器往往拒绝加载本地文件尤其是一些严格模式的浏览器。解决办法是起一个本地服务我习惯用Python自带工具python -m http.server 8000然后浏览器访问http://localhost:8000。这样加载本地音频就不会有协议限制。如果你用Node也可以用npx serve。如果音频放在远程服务器上还必须注意服务器是否设置了CORS头。尤其是用在线歌单链接常常会有防盗链直接加载会403。我的建议是尽量用本地文件稳定性最高。5.2 浏览器阻止自动播放怎么办网页里调用audio.play()如果不在用户点击事件里触发浏览器就会拦截。第一次生成的代码里搜索过滤后自动播放会被拦截。解决方法是确认音频播放必须由用户触发或者在页面初始化时不自动播放。如果一定要让页面打开就能听到声音也可以加一个“开启声音”的按钮用点击事件解锁AudioContext或者直接触发play但这样体验并不好。我更推荐的做法是把自动播放默认为关闭用户可以自行点击播放。5.3 AI生成的代码和预期不符怎么办这个问题几乎每个人都会遇到。我的经验是不要急着发火把问题拆成两个方向是逻辑问题还是表达问题。如果是逻辑问题比如点击播放没有反应就把具体报错信息直接贴给AiPy让它排查。如果是表达问题比如界面风格不符合预期就要更详细地描述比如“左侧栏宽度200px背景颜色#1a1a2e播放条高度80px封面图片尺寸64x64”这样AI才能精确调整。还需要注意对话的上下文一致性。AiPy这种AI工具有长期上下文可以跨多轮修改。但它也有记忆的局限一旦你让它彻底重构某个模块最好明确说“保留当前x重构y”不然它可能把之前某个功能弄丢。5.4 我的调试心得调这个项目的过程中我最大的感触是AI编程让开发门槛变低了但不代表开发者可以不理解代码。我可以让AiPy写代码但出了问题还是要靠浏览器的开发者工具看Console报错看Network请求状态。如果完全看不懂错误就会陷入“让AI改、改完还是错、再让AI改”的死循环。建议想玩这类工具的朋友至少花点时间学一下前端三件套的基础以及浏览器的调试工具这对使用AI编程有百利而无一害。我还把几种常见问题整理成了一个速查表放在最后供你参考现象可能原因处理方式歌曲列表不显示封面img路径错误或图片不存在检查Network里的图片请求修正路径点击播放没声音音频文件格式不支持或跨域受限转成mp3格式确保本地服务启动进度条无法拖拽没有监听change事件改用input[typerange]搜索后播放状态丢失当前歌曲索引未正确映射维护真实歌曲索引不依赖渲染列表歌词加载不出来fetch本地文件被拦截启动本地HTTP服务随机播放总是随机到同一首随机算法未排除当前索引用do-while循环重新生成随机数最后再分享一个小经验AI写的代码是“逻辑正确优先”但不一定是最优实现。你完全可以在它生成的代码基础上继续优化比如把数组去重、把重复DOM渲染改成DocumentFragment、把多个事件监听合并成事件委托。这些优化我都没让AiPy做而是自己动手改了一遍改完之后项目运行更流畅也让我对这个AI生成的音乐平台有了一种“亲手打磨过”的感觉。这个小工具到现在还在我的手机里躺着偶尔想起来就打开听两首自己控制歌单的感觉确实比那些大平台自在得多。