The Aria in Owari No Sekai
在世界终结时的咏叹调。
一个在线歌词海报生成器是也。
Demo:https://taions.yuuikic.com/
其实是Yuuikic的前端学习和练手项目
- 搜索歌曲,获取歌词
- 选择歌词
- 生成海报
- 简单的样式编辑
- 添加新的API,来自 Musicmatch
- 在搜索框中输入。
- 回车,或者点击搜索框上方图片搜索。
- 选中想要生成歌词海报的歌曲。
- 选择想要生成歌词海报的歌词。
- 点击“箭头”将选中的歌词添加至海报中。
- 自定义样式。
- 手动截图,或者使用“截图—截图”来创建一个自动下载的图片文件。
- 大功告成~
-
搜索歌曲来源平台为网易云音乐。如没有出现想要的歌曲,尝试在搜索时除了填入歌曲名外,额外添加艺术家、专辑名等信息。
-
API请求对IP地址有一定要求,中国大陆的IP可正常返回搜索结果。如果返回的结果与搜索内容完全无关,请优先尝试关闭代理,或者切换到其他区域的IP后再使用。
-
搜索过程较慢,但一般不会超过10秒。如果过长时间没有反应,请尝试刷新网页。
-
点击返回的结果获取歌词。点击文字结果会获取原歌词,点击文字右侧专辑图片会获取翻译歌词(如果有翻译歌词可用)
-
目前可以自定义的样式:背景图片模糊、自定义背景图片、字体、文字颜色、背景色调。
值得注意的是,由于项目依赖html2canvas的原因,使用“截图—截图”无法截取带背景模糊的样式的海报。请通过调节背景透明度以改善文字可读性。
-
GPL V3.0
-
Firxfox浏览器不支持backdrop-filter这一样式,故宝丽来相纸的背景模糊在Firefox上无法实现(短期内不打算另写一套支持Firefox的样式)
-
部分屏幕尺寸下显示效果差(比如iPad),只推荐在16:9屏幕的屏幕以及手机设备上使用,其他设备不保证使用效果。
-
如上文所述,由于项目依赖html2canvas的原因,使用“截图—截图”无法截取带背景模糊的样式的海报。并且使用这种方法截图时,图片周围可能会随机地出现1px宽度的白边。
-
You tell me.
- 使用网易云音乐API获取歌曲信息
- 使用Color Thief获取封面主题色
- 使用html2canvas获取截图
- 使用FileSaver.js保存截图图片
- 使用APlayer作为音乐播放器
- 使用MetingJS简化播放器使用
- 借鉴了Apple Music的样式(逃)
一个教会了我一大堆东西
一个没事就跑来和我唠嗑
2022/1/28
- 新增“宝丽来相纸”样式。
- 更换生成海报的按钮。
2022/1/30
- 新增字体筑紫A丸,修改默认衬线字体为Noto_Serif
- 新增调节字体大小功能
- 大概适配了iOS设备
2022/2/2/6
- 添加了计数器,来自Moe-counter。