TAiONS-歌词海报生成器

The Aria in Owari No Sekai

在世界终结时的咏叹调。

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

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

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


想要实现的功能

搜索歌曲,获取歌词
选择歌词
生成海报
简单的样式编辑

竟然都做出来了(逃


使用步骤

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

注意

  1. 项目部署在Github Pages上,访问加载速度可能较慢。请尝试更换网络环境以获得更好体验。
  2. 搜索歌曲来源平台为网易云音乐。搜索只返回5条相关结果,如没有出现想要的歌曲,尝试在搜索时除了填入歌曲名外,额外添加艺术家、专辑名等信息。
  3. 搜索过程较慢,但一般不会超过10秒。如果过长时间没有反应,请尝试刷新网页。
  1. 点击返回的结果获取歌词。点击文字结果会获取原歌词,点击文字右侧专辑图片会获取翻译歌词(如果有翻译歌词可用)
  2. 目前可以自定义的样式:背景图片模糊、自定义背景图片、字体、文字颜色、背景色调。 值得注意的是,由于项目依赖html2canvas的原因,使用“截图—截图”无法截取带背景模糊的样式的海报。请通过调节背景透明度以改善文字可读性。
  3. GPL V3.0

鸣谢

  1. 使用网易云音乐API获取歌曲信息
  2. 使用Color Thief获取封面主题色
  3. 使用html2canvas获取截图
  4. 使用FileSaver.js保存截图图片
  5. 使用APlayer作为音乐播放器
  6. 使用MetingJS简化播放器使用
  7. 借鉴了Apple Music和Spotify的样式(逃)

更新日志

2022/1/28

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

2022/1/30

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

评论

  1. 迪迪迪
    2 年前
    2022-1-30 17:55:07

    这个牛逼啊。一点小小的建议,能否让用户设置字号呢?如果不能的话,你看能不能把显示的字符或者行间距调小一点。因为汉字和日文还好,但是英文的歌词比较长,导致显示不全

    • 博主
      2 年前
      2022-1-30 23:58:14

      感谢反馈,现在已经加上了字号调节功能。
      默认样式固定了海报尺寸,所以无法展示过多歌词。点击“截图—样式”可以更换第二种样式,它能够自适应调整海报尺寸。目前看来英文歌词的显示效果的确不佳,主要是由英文单词的折行问题导致。

      • 迪迪迪
        2 年前
        2022-2-01 12:27:24

        厉害啊,大佬牛逼

发送评论 编辑评论


				
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Emoji
2233娘
kumiko
蛆音娘
原神
上一篇
下一篇
Copyright © 2024 桜庭夜 | 杂话铺子
Theme Argon