用AI快速创建个性化音乐播放器代码，提升用户体验
提示词描述：
面向音乐爱好者和前端学习者，通过实战项目掌握音频处理技术。生成代码可直接嵌入个人网站，预期实现响应式播放界面与基础音效处理。使用技巧：利用Canvas绘制频谱动画时注意requestAnimationFrame性能优化。
提示语关键词：
AI写前端代码,音乐播放器开发教程,Web Audio API应用,JavaScript音频处理,响应式UI代码,网页播放器模板
提示词内容：
假设你是前端开发专家，请指导我编写一个具有可视化波形显示和智能播放列表的网页音乐播放器。首先用HTML/CSS搭建基础界面，重点实现播放进度条与音量控制的联动效果。接着用JavaScript添加音频API调用，要求支持本地文件拖拽上传。在编写均衡器算法时，请对比Web Audio API与第三方库的优劣，给出性能优化方案。最后添加播放历史记录功能，注意处理跨域音频资源的加载问题。每个步骤完成后请用注释标注关键代码段，并提醒常见陷阱（如自动播放策略限制）。现在请从界面布局开始逐步演示。