我的水平也就cmd敲个pip install那种,上个星期很好奇那种b站上看到的歌曲推荐视频的音乐播放器效果是怎么做的,发现还要pr或者剪映制作,我在想能不能直接做出来一个,然后刷到视频发现gpt-5.3-codex可以免费用,也是在vscode上使用codex插件尝试制作了。
一个账号的额度每七天重置,一个号我就用了一整天了,有七个号那就可以无限白嫖。我直接弄三个号,哎呀真爽。
- ——3.10 刷视频发现codex官方取消掉5.3-codex和5.4模型了,那些人批量注册账号太狠了。还好我提前弄了。
一开始是直接画个图给ai看做个大概出来,就想着做个网页端的播放器。
先生成了这个初步的页面,后面就继续完善主页面(歌词滚动、音频可视化、音乐播放控制台、歌词循环)、侧边栏(获取api、背景设置、账号登录)、保存各项设置等。
这里就不写什么过程了,前前后后和ai对话了几十次,大部分时间都是耗在推理上,有会员的话应该就能快点。


侧边栏
鼠标移动到主页面右侧就能弹出,经过了一天折腾差不多就这样了,浏览器截不了全部

主页面
基本就先这样,没那么花里胡哨,简单点甚好。
当然控制台的播放键啥的也是ai生成的,然后ps扣出来就行

api接入和启动方法
当然很大一部分功能还是要靠api,这里我用的是网易云的接口,毕竟我习惯用了,然后本地部署那些东西也成功了,也实现了登录功能,具体看这里就行。
https://github.com/neteasecloudmusicapienhanced/api-enhanced
用bat文件启动的时候可以把这个api接口也一起启动了,然后就能跳到网页去
歌词循环
等了30多分钟,这下把歌词循环给弄出来了,还支持ctrl选择歌词和shift一键选择循环,想单听一行歌词学唱还是很有帮助的。之前用网易云的时候还得手动放回去,这下不需要这么麻烦了,主流的好像就没看到有播放器支持这功能,还得是ai,这也能做出来。

高亮选择后出现循环按钮

点击循环按钮后窗口控制

下载歌曲/切换音质
后面刷手机等了50分钟没白等,真的可以下载歌曲和切换音质了



背景图
支持三种背景(歌曲封面/图片/视频),然后给图片弄了裁剪放大旋转功能,不过有点小瑕疵但问题不大

设置保存
刷新网页后就能保存设置了,这下再也不用再选一次歌曲了

总结
用下来挺牛逼的,关键是就算生成的东西有点错误他也能修好,当然还是需要人工引导,有时候也需要自己想想是什么问题导致的错误,基本上我就靠这样把问题弄好了。
我在纸上画的设计图和潦草的文字也能识别,放在以前不可能做到。而且思考的时候还能检查,就是慢了点,关键是直接在代码修改,就不像网页端还要复制,特别是像我后面这script.js文件的代码已经4k多行了,要是浏览器复制人都麻了。虽然感觉存在ai史山,不过能跑就行而且我也不会看啊!
当然肯定还有很多东西有可以优化,就这些功能放在其他播放器里基本都有而且更好,像ui那些东西其实都不是什么大问题,有设计图和对应的图片素材ai一下就能改出来。
换做以前弄出这玩意应该要学挺久的吧,敲代码都不知道要敲多久。放在现在真就用ai花个几天就能搞定。
现在想想或者直接给codex上传音乐播放器的需求文档,把想要的效果和功能描述什么的全部写下。这样应该能一次性大多数效果,我这样一点一点加就慢多了。

