Yuuikic/LyricsPoster

TAiONS - 歌词海报生成器

TAiONS

The Aria in Owari No Sekai

在世界终结时的咏叹调。

一个在线歌词海报生成器是也。

Demo：https://taions.nonon.moe/

其实是Yuuikic的前端学习和练手项目

想要实现的功能

• 搜索歌曲，获取歌词
• 选择歌词
• 生成海报
• 简单的样式编辑
• 添加新的API，来自 Musicmatch

使用步骤

1. 在搜索框中输入。
2. 回车，或者点击搜索框上方图片搜索。
3. 选中想要生成歌词海报的歌曲。
4. 选择想要生成歌词海报的歌词。
5. 点击“箭头”将选中的歌词添加至海报中。
6. 自定义样式。
7. 手动截图，或者使用“截图—截图”来创建一个自动下载的图片文件。
8. 大功告成~

注意

1. 搜索歌曲来源平台为网易云音乐。搜索只返回5条相关结果，如没有出现想要的歌曲，尝试在搜索时除了填入歌曲名外，额外添加艺术家、专辑名等信息。

2. 搜索过程较慢，但一般不会超过10秒。如果过长时间没有反应，请尝试刷新网页。

3. 点击返回的结果获取歌词。点击文字结果会获取原歌词，点击文字右侧专辑图片会获取翻译歌词（如果有翻译歌词可用）

4. 目前可以自定义的样式：背景图片模糊、自定义背景图片、字体、文字颜色、背景色调。

   值得注意的是，由于项目依赖html2canvas的原因，使用“截图—截图”无法截取带背景模糊的样式的海报。请通过调节背景透明度以改善文字可读性。

5. GPL V3.0

已知问题

1. Firxfox浏览器不支持backdrop-filter这一样式，故宝丽来相纸的背景模糊在Firefox上无法实现（短期内不打算另写一套支持Firefox的样式）

2. 部分屏幕尺寸下显示效果差（比如iPad），只推荐在16：9屏幕的屏幕以及手机设备上使用，其他设备不保证使用效果。

3. 如上文所述，由于项目依赖html2canvas的原因，使用“截图—截图”无法截取带背景模糊的样式的海报。并且使用这种方法截图时，图片周围可能会随机地出现1px宽度的白边。

4. You tell me.

鸣谢

• 使用网易云音乐API获取歌曲信息
• 使用Color Thief获取封面主题色
• 使用html2canvas获取截图
• 使用FileSaver.js保存截图图片
• 使用APlayer作为音乐播放器
• 使用MetingJS简化播放器使用
• 借鉴了Apple Music的样式（逃）

特别鸣谢

一个教会了我一大堆东西

一个没事就跑来和我唠嗑

更新日志

2022/1/28

1. 新增“宝丽来相纸”样式。
2. 更换生成海报的按钮。

2022/1/30

1. 新增字体筑紫A丸，修改默认衬线字体为Noto_Serif
2. 新增调节字体大小功能
3. 大概适配了iOS设备

2022/2/2/6

1. 添加了计数器，来自Moe-counter。