可爱老人网

 找回密码
 注册会员
搜索
查看: 65|回复: 5

H5音画在线制作

[复制链接]
发表于 2026-1-19 06:45 | 显示全部楼层 |阅读模式
本帖最后由 彩云归 于 2026-1-19 06:45 编辑

  这款工具是《花潮论坛》马黑黑制作。网友称赞该工具:“帖子电饭煲宝,做贴没烦恼,图片音乐和视频,往里填就好,一键生成音画贴,漂亮又美妙,操作简单容易懂,人人都叫好!”

简单说明各个模块的使用方法和注意事项:

一、帖子容器

⒈ 帖子宽高 :帖子的宽高设置非必须,因为 tzMaker 所引用的 css 使用了弹性设置以自适应不同的显示分辨率,但可根据需要设置帖子容器的宽高。
⒉ 自定义CSS :可选。这里要求的数据是CSS选择器代码,一行一个选择器,例如:

.vid { mix-blend-mode: screen; opacity: 0.5; }

上面设置的是一个自定义视频标签,它在 tzMaker CSS 资源中已经设置了基本的样式,这里是追加属性设置:融合和透明度。这个选择器用于自定义视频,对应的视频设置模块应点选视频来源的“其它”子项。

二、音频

集成网易云音乐前缀的手动上屏功能:点击音频地址文本框下边的文字,wyy音频地址前缀上屏,加上音频的id即可。

三、视频

⒈ 视频来源视情况点选相应子项,不然对不上号,修饰效果会达不到预期。如果使用的是自定义(即其它)视频来源,且前面已经设置了 .vip {} 选择器,这里的相关CSS不用填写。
⒉ 相关CSS可选,觉得比要可以写入一些CSS属性值,例如透明度设置、尺寸等:

opacity: 0.5; width: 200px; height: 200px; border-radius: 50%; left: 100px; top: 100px;

⒊ 如果帖子不需要视频,“视频地址”输入框留空即可。

四、小播

通过工具制作的小播为简易版:使用 img 或 div 元素充当小播,任意一种都可以,同时都需要提供图片地址。小播默认使用 .ma 选择器制定的样式,在“帖子容器”设置中的“小播尺寸”子项针对的就是小播。小播在帖子中的位置在这里设置。需要高级功能版的效果请在生成代码之后修改对应源码。

五、进度条

利用工具制作的 tzMaker 音频播放进度条为简易版,背景进度条。在这里,至少需要设置进度条的位置。

六、LRC歌词

⒈ 歌词格式 :分花潮格式和原生格式。二者的区别在于模拟逐字同步的精准度,后者没有手动掐算每句歌词的演唱用时。选择何种格式视自己准备的歌词格式而定。歌词数据的填写支持单行、分行,花朝格式的按数组内容的组织格式填写,原生格式的单行使用 \n 符号衔接各句、多行时每行一个 [mm:ss.nn]歌词 数据信息。
⒉ 歌词效果 :淡入效果,可选,建议非花潮格式的歌词使用。
⒊ 歌词定位 :默认绝对居中显示,可以自设位置。在这里,还可以以CSS属性设置的方式自定义歌词颜色、同步色(勾选淡入效果的设置无效),例如下面的设置(--c1和--c2时同步渐变参与颜色)——

top: 100px; color: gray; --c1: pink; --c2: purple;

七、全屏

可以设置的主要内容为定位、前景色(边框色与之同)等,例:color: #eee; left: 30px; bottom: 30px;

八、生成代码和预览

这里所生成的代码均来源于前面各个模块的设置,动态生成,修改这里的代码不会影响前面模块的数据且重新生成代码时仍然依据前面模块的设置。代码一旦生成则预览模块被激活,点击“预览”按钮则可查看帖子效果。若效果达不到预期,可以回头继续修改对应模块的相应数据。

【其他说明】

⒈ 工具不保存用户数据,所填写数据仅在当次使用时有效,关闭或刷新工具页面数据全部消失。

⒉ 有高级应用需求的可以在生成代码后将代码复制到Web页制作编辑器中进行修改,这将大大节省代码的组织成本。

⒊ 工具HTML文档会在测试满意之后再整理上传,需要本地运行工具的朋友敬请关注马黑永硕网盘,一般会放在“网络相关”目录。

⒋ 本工具和tzMaker均为手搓代码,加之水平有限,错误在所难免,若有发现错误或不合适指出,敬请指正。

马黑 2026年1月15日

评分

参与人数 3人气值 +13 收起 理由
沧海笑 + 3 赞一个!
真真 + 5 谢谢老师!
潇湘翁 + 5 大赞!

查看全部评分

发表于 2026-1-19 07:02 | 显示全部楼层
老师雪中送炭,太好了,大家的福音,我已收藏,谢谢分享了,早上问好!遥祝冬安!
发表于 2026-1-19 07:04 | 显示全部楼层
老师:谢谢您提供H5音画在线制作,早上好!

发表于 2026-1-19 08:45 | 显示全部楼层
谢谢老师提供H5音画在线制作 上午好
发表于 2026-1-19 08:54 | 显示全部楼层
朋友们有福了,谢谢老师!
发表于 2026-1-19 09:38 | 显示全部楼层
老师辛苦了!
        
下一页 发布主题 快速回复

手机版|公众号|小黑屋|可爱老人网

GMT+8, 2026-1-19 19:47

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表