he Aria in Owari No Sekai
在世界终结时的咏叹调。
一个在线歌词海报生成器是也。
Demo:https://taions.yuuikic.com/
其实是Yuuikic的前端学习和练手项目
请查看TAiONS V2了解最新版本
想要实现的功能
搜索歌曲,获取歌词
选择歌词
生成海报
简单的样式编辑
竟然都做出来了(逃
使用步骤
- 在搜索框中输入。
- 回车,或者点击搜索框上方图片搜索。
- 选中想要生成歌词海报的歌曲。
- 选择想要生成歌词海报的歌词。
- 点击“箭头”将选中的歌词添加至海报中。
- 自定义样式。
- 手动截图,或者使用“截图—截图”来创建一个自动下载的图片文件。
- 大功告成~
注意
- 项目部署在Github Pages上,访问加载速度可能较慢。请尝试更换网络环境以获得更好体验。
- 搜索歌曲来源平台为网易云音乐。搜索只返回5条相关结果,如没有出现想要的歌曲,尝试在搜索时除了填入歌曲名外,额外添加艺术家、专辑名等信息。
- 搜索过程较慢,但一般不会超过10秒。如果过长时间没有反应,请尝试刷新网页。
- 点击返回的结果获取歌词。点击文字结果会获取原歌词,点击文字右侧专辑图片会获取翻译歌词(如果有翻译歌词可用)
- 目前可以自定义的样式:背景图片模糊、自定义背景图片、字体、文字颜色、背景色调。 值得注意的是,由于项目依赖html2canvas的原因,使用“截图—截图”无法截取带背景模糊的样式的海报。请通过调节背景透明度以改善文字可读性。
- GPL V3.0
鸣谢
- 使用网易云音乐API获取歌曲信息
- 使用Color Thief获取封面主题色
- 使用html2canvas获取截图
- 使用FileSaver.js保存截图图片
- 使用APlayer作为音乐播放器
- 使用MetingJS简化播放器使用
- 借鉴了Apple Music和Spotify的样式(逃)
更新日志
2022/1/28
- 新增“宝丽来相纸”样式。
- 更换生成海报的按钮。
2022/1/30
- 新增字体筑紫A丸,修改默认衬线字体为Noto_Serif
- 新增调节字体大小功能
- 大概适配了iOS设备
这个牛逼啊。一点小小的建议,能否让用户设置字号呢?如果不能的话,你看能不能把显示的字符或者行间距调小一点。因为汉字和日文还好,但是英文的歌词比较长,导致显示不全
感谢反馈,现在已经加上了字号调节功能。
默认样式固定了海报尺寸,所以无法展示过多歌词。点击“截图—样式”可以更换第二种样式,它能够自适应调整海报尺寸。目前看来英文歌词的显示效果的确不佳,主要是由英文单词的折行问题导致。
厉害啊,大佬牛逼